html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>幻灯片特效 在线演示 DIVCSS5</title>

<style type="text/css">

body {font-size:12px; color:#222; text-align:center; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;}

ul,li {list-style:none; margin:0px; padding:0px;}

img {border:0;}

/* 以下特效CSS */

.focus {width:600px; height:280px; margin:0 auto; overflow:hidden; position:relative;}

.focus ul {height:280px; position:absolute;}

.focus ul li {float:left; width:600px; height:280px; overflow:hidden; position:relative; background:#000;}

.focus ul li div {position:absolute; overflow:hidden;}

.focus .btnBg {position:absolute; width:600px; height:20px; left:0; bottom:0; background:#000; display:none;}

.focus .btn {position:absolute; width:580px; height:23px; padding:0px 10px 0px 10px; right:0; bottom:6px; text-align:right;}

.focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:24px; line-height:24px; text-align:center; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}

.focus .btn span.on {background:#fff;}

.focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(/Images/sprite.png) no-repeat 0 0; cursor:pointer;}

.focus .pre {left:0;}

.focus .next {right:0; background-position:right top;}

</style>

<script type="text/javascript" src="/Javascript/jquery.js"></script>

<script type="text/javascript" src="/Javascript/9.js"></script>

<script type="text/javascript">

	$(document).ready(function(){

	  	$.focus("#focus001");

	});

</script>

</head>

<body>

<div class="focus" id="focus001">

    <ul>

        <li><a href="http://www.divcss5.com/" target="_blank"><img src="/Images/01.jpg" alt="jquery特效" /></a></li>

        <li><a href="http://www.divcss5.com/" target="_blank"><img src="/Images/02.jpg" alt="DIVCSS5" /></a></li>

        <li><a href="http://www.divcss5.com/css-texiao/texiao735.shtml" target="_blank"><img src="/Images/03.jpg" alt="点击左右滚动jquery焦点图特效" /></a></li>

    </ul>

</div>

</body>

</html>

javascript代码：

$(function() {

	jQuery.focus = function(slid) {

		var sWidth = $(slid).width(); //获取焦点图的宽度（显示面积）

		var len = $(slid).find("ul li").length; //获取焦点图个数

		var index = 0;

		var picTimer;

		//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮

		var btn = "<div class='btnBg'></div><div class='btn'>";

		for(var i=0; i < len; i++) {

			var ii = i+1;

			btn += "<span>"+ii+"</span>";

		}

		btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";

		$(slid).append(btn);

		$(slid).find("div.btnBg").css("opacity",0.5);

		//为小按钮添加鼠标滑入事件，以显示相应的内容

		$(slid+" div.btn span").css("opacity",0.4).mouseenter(function() {

			index = $(slid+" .btn span").index(this);

			showPics(index);

		}).eq(0).trigger("mouseenter");

		//上一页、下一页按钮透明度处理

		$(slid+" .preNext").css("opacity",0.2).hover(function() {

			$(this).stop(true,false).animate({"opacity":"0.5"},300);

		},function() {

			$(this).stop(true,false).animate({"opacity":"0.2"},300);

		});

		//上一页按钮

		$(slid+" .pre").click(function() {

			index -= 1;

			if(index == -1) {index = len - 1;}

			showPics(index);

		});

		//下一页按钮

		$(slid+" .next").click(function() {

			index += 1;

			if(index == len) {index = 0;}

			showPics(index);

		});

		//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度

		$(slid+" ul").css("width",sWidth * (len));

		//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放

		$(slid).hover(function() {

			clearInterval(picTimer);

		},function() {

			picTimer = setInterval(function() {

				showPics(index);

				index++;

				if(index == len) {index = 0;}

			},2000); //此4000代表自动播放的间隔，单位：毫秒

		}).trigger("mouseleave");

		//显示图片函数，根据接收的index值显示相应的内容

		function showPics(index) { //普通切换

			var nowLeft = -index*sWidth; //根据index值计算ul元素的left值

			$(slid+" ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position

			$(slid+" .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果

			$(slid+" .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果

		}

	};

});

　　

幻灯片（jquery实现）的更多相关文章

  1. 推荐15款创建漂亮幻灯片的 jQuery 插件

    对于设计师,开发者,摄影师或任何创造性的个人和企业,他们自己的网站是展示他们的技能和服务的最佳场所.你可能打算设计一个新的个人作品网站,不管你是从头开始或使用模板,都会需要使用 jQuery 幻灯片插 ...

  2. 15款创建美丽幻灯片的 jQuery 插件

    1. Skippr Skippr 是一个超级简单的 jQuery 幻灯片插件.仅仅是包含你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了. Sk ...

  3. Jquery.KinSlideshow图片轮播插件

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome* ...

  4. jQuery插件Skippr实现焦点图

    史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件.响应式布局插件,强大的参数自定义 配置,可自定义切换速度.切换方式.是否显示左右箭头.是否自动播放.自动播放间隔时间等配置 参数,调 ...

  5. jquery 插件大全

    1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件 对话框 日期 4.lhgdia ...

  6. 【转】20个令人敬畏的jQuery插件

    为网页设计师和开发推荐20个令人敬畏的jQuery插件.例如滑块,图像画廊,幻灯片插件,jQuery的导航菜单,jQuery文件上传,图像旋转器,标签的插件,用户界面​​元素,网络接触形式,模态窗口, ...

  7. jquery树形菜单

    转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  9. 多功能前台交互效果插件superSlide

    平时我们常用的"焦点图/幻灯片""Tab标签切换""图片滚动""无缝滚动"等效果要加载n个插件,又害怕代码冲突又怕不兼容 ...

  10. JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）

    JavaScript资源大全中文版(Awesome最新版)   目录 前端MVC 框架和库 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 基于 Node 的 CMS 框 ...

随机推荐

  1. 使用PHP抓取网站ico图标

    网站许久没用更新,以后会经常更新,本次分享一个使用PHP抓取网站ico的程序,提供一个网站列表后对网站的ico进行下载抓取,具体代码如下: <?php /** * 更新热站ico * gao 2 ...

  2. android 电容屏（三）：驱动调试之驱动程序分析篇

    平台信息: 内核:linux3.4.39系统:android4.4 平台:S5P4418(cortex a9) 作者:瘋耔(欢迎转载,请注明作者) 欢迎指正错误,共同学习.共同进步!! 关注博主新浪博 ...

  3. pku,杨建武:文本挖掘技术

    http://webkdd.org/course/ http://www.icst.pku.edu.cn/lcwm/course/WebDataMining/ http://www.icst.pku. ...

  4. vijos1194 Domino

    vijos上的题解: 1.因为每个格子不是被覆盖就是没被覆盖,状态只有0 1两种,m<=5,所以可以将每一列的状态压缩,看作一个二进制数.2.矩阵G表示从I状态到J状态的路径条数,自乘N次为长度 ...

  5. 软件测试Web数据分析工具HttpWatch安装

    1.下载破解版:http://www.pc6.com/softview/SoftView_13845.html 2.安装时引入授权文件并汉化: 3.打开IE9,菜单:管理加载项->工具栏和扩展, ...

  6. ORACLE SQLloader详细语法

    Oracle   SQL   Loader的详细语法     SQL*LOADER是ORACLE的数据加载工具,通常用来将操作系统文件迁移到ORACLE数据库中.SQL*LOADER是大型数据     ...

  7. Asp.Net MVC 模型(使用Entity Framework创建模型类) - Part.1

    这篇教程的目的是解释在创建ASP.NET MVC应用程序时,如何使用Microsoft Entity Framework来创建数据访问类.这篇教程假设你事先对Microsoft Entity Fram ...

  8. FAT32文件系统--For TF卡

    1. TF卡空间是如何分配的? 下面以4GB TF卡为例,通过WinHex工具进行分析,其空间分配如下图所示: FAT32把目录当做文件来管理,所以没有独立的目录区,所有的文件目录项都是在数据区里面的 ...

  9. 扩展类加载器-------改变JAVA的父优先类加载顺序

    java的类加载机制默认情况下是采用委托模型:当加载某个类时JVM会首先尝试用当前类加载器的父类加载器加载该类,若父类加载器加载不到再由当前类加载器来加载,因此这种模型又叫做“父优先”模型. 但是在实 ...

  10. Can't find file: './mysql/plugin.frm' (errno: 13)[mysql数据目录迁移错位]错误解决

    大概需要4个步骤,其中第1步通过service mysql stop停止数据库,第4步通过service mysql start启动数据库. 第2步移动数据文件,不知道是否为Ubuntu智能的原因,移 ...