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. JVM内存状况查看方法和分析工具

    Java本身提供了多种丰富的方法和工具来帮助开发人员查看和分析GC及JVM内存的状况,同时开源界和商业界也有一些工具可用于查看.分析GC及JVM内存的状况.通过这些分析,可以排查程序中内存泄露的问题及 ...

  2. C++中的INL

    inl文件介绍 inl文件是内联函数的源文件.内联函数通常在C++头文件中实现,但是当C++头文件中内联函数过多的情况下,我们想使头文件看起来简洁点,能不能像普通函数那样将内联函数声明和函数定义放在头 ...

  3. SGU 101 修改

    感谢这里. test4确实是个不连通的case,奇怪的是我用check函数跟if (check() == false)来判断这个case,当不连通时就死循环,得到的结果是不一样的,前者得到WA,后者得 ...

  4. Android tab_Host页面跳转，传值，刷新等问题汇总

    之前做了一个项目是关于Tab_Host的,现在完成了恰逢闲余写份总结,主要涉及里面遇到问题以及解决方案的. (首先说明这份代码是在eoe 下载的,这里感谢分享的那位朋友,限于我的工程是公司的不能拿出来 ...

  5. NFC(13)使用Android Beam技术传输文件

    注意 Android Beam技术传输文件时nfc只负责连接两个手机,而传输文件实际是用蓝牙模块.且目前接收文件功能只是系统完成,不用自写个接收程序. 传输文件相关的重要api 从Android4.1 ...

  6. C/C++中static关键词的作用

    1.在函数体内的static变量作用范围是该函数体,其只被内存分配一次,所以在下次调用的时候会保持上一次的值. 2.模块内的static全局变量可以被模块内的所有函数访问,但不能被模块外的函数访问. ...

  7. Hibernate数据库持久层框架

    Hibernate是一种Java语言下的对象关系映射解决方案. 它是使用GNU宽通用公共许可证发行的自由.开源的软件.它为面向对象的领域模型到传统的关系型数据库的映射,提供了一个使用方便的框架.Hib ...

  8. freemarker 如何获得list的索引值

    <#list toplist as toplists> ${toplists_index} </#list> 相当方便

  9. autofac 学习记录

    builder.RegisterModule(new ConfigurationSettingsReader()); 需要注册上面一句才能读到.config里的节点,xml配置方式如下 <con ...

  10. JAVA并行框架学习之ForkJoin

    当硬件处理能力不能按照摩尔定律垂直发展的时候,选择了水平发展,多核处理器已经广泛应用.未来随着技术的进一步发展,可能出现成百上千个处理核心,但现有的程序运行在多核心处理器上并不能得到较大性能的提升,主 ...