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. [Unity菜鸟] Unity鼠标双击，鼠标函数整理(未完)

    1. 鼠标双击 void OnGUI() { Event Mouse = Event.current; if (Mouse.isMouse && Mouse.type == Event ...

  2. Qt的版本历史

    发展史 Qt的第一个商业版本于1995年推出,随后Qt的发展就很快了,下面是Qt发展史上的一 些里程碑,从之前的Qt1.x开始到现在的Qt5.x. Qt1-3 版本 发布日期 1.40 10 July ...

  3. QT小技巧（书上没有的）

    1. Layout本身不能控制隐藏和显示,但是可以在外面专门套一个Widget,然后控制这个Widget就可以达到相应的效果了. 2. 空目录居然也存在 if (QDir(""). ...

  4. python函数--传参

    一.位置参数 二.关键字参数 三.默认参数 四.任意数量的位置参数: 1. *x 2. 传入的多个参数,最终合并成一个元组 3. 之后的参数必须用关键字参数 五.任意数量的关键字参数 1. **x 2 ...

  5. CodeWars可以学习的

    http://www.codewars.com/kata/54ff3102c1bad923760001f3/solutions/csharp 判断给定的字符串有多少个a e i o u using S ...

  6. 武汉北大青鸟解读2016年10大IT热门岗位

    武汉北大青鸟解读2016年10大IT热门岗位 2016年1月5日 13:37 北大青鸟 这是IT从业者的辉煌时代,IT行业的失业率正处在历史的低点,而且有的岗位——例如网络和安全工程师以及软件开发人员 ...

  7. poj 1753 Flip Game 枚举（bfs+状态压缩）

    题目:http://poj.org/problem?id=1753 因为粗心错了好多次……,尤其是把1<<15当成了65535: 参考博客:http://www.cnblogs.com/k ...

  8. UVa 294 (因数的个数) Divisors

    题意: 求区间[L, U]的正因数的个数. 分析: 有这样一条公式,将n分解为,则n的正因数的个数为 事先打好素数表,按照上面的公式统计出最大值即可. #include <cstdio> ...

  9. BZOJ_1022_[SHOI2008]_小约翰的游戏John_(博弈论_反Nim游戏)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1022 反Nim游戏裸题.详见论文<组合游戏略述——浅谈SG游戏的若干拓展及变形>. ...

  10. [LOJ 1248] Dice (III)

    G - Dice (III) Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Descri ...