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. Android EditText属性

    1.EditText输入的文字为密码形式的设置 (1)通过.xml里设置: 把该EditText设为:android:password="true" // 以”.”形式显示文本 ( ...

  2. Linux的终端与进程

    原文链接:http://os.51cto.com/art/201104/256477.htm Linux的普通进程(守护进程除外) 是终端的子进程,进程的存在要依赖终端为其提供空间包括标准输入.标准输 ...

  3. WinAPI——钩子函数大全3

    函数原形:LRESULT CALLBACK JournalPlaybackProc(int code, WPARAM wParam, LPARAM lParam); 参数: code:指示一个代码,被 ...

  4. 8 Things Every Person Should Do Before 8 A.M.

    https://medium.com/@benjaminhardy/8-things-every-person-should-do-before-8-a-m-cc0233e15c8d 1. Get A ...

  5. awesome cpp

    https://github.com/fffaraz/awesome-cpp Awesome C/C++ A curated list of awesome C/C++ frameworks, lib ...

  6. poj 3080 Blue Jeans（水题 暴搜）

    题目:http://poj.org/problem?id=3080 水题,暴搜 #include <iostream> #include<cstdio> #include< ...

  7. Innodb引擎 long semaphore waits

    上一篇介绍了因为子表过多,导致innodb crash的情况,但crash的原因是long semaphore waits.long semaphore waits又为何物? 背景:Innodb使用了 ...

  8. poj3666

    一道不错的dp题 就是最小修改代价,使序列变为一个非下降序或非上升(由于数据较弱直接求非下降即可,当然非上升非下降本质是一样的) 观察可得到,修改后得到的数列中的元素最后一定都在原序列中: 由此我们可 ...

  9. 在Google被封的那些日子裏，我們這樣科學上網

    回到正題,如果某天你喜歡的網站被封了,你工作的郵箱無法訪問了,該如何用正確姿勢實現科學上網呢?雷鋒網為大家整理了數個小技巧. 1.FreeGate類傻瓜工具 很多人第一次用翻墻,應該是從FreeGat ...

  10. TreeView点击父节点不刷新展开子节点

    1.设置TreeView的属性EnableClientScript=true: 2.在动态绑定TreeView时,设置Node的属性SelectAction为Expand       newNode. ...