Jquery 焦点图用于图片展示效果代码

更新时间：2010年05月18日 20:30:53 作者：

今天因网站需要写了个图片展示效果,其中用到了Jquery的data函数，刚学就被我用这了，昨天看时还觉得无甚用处，因为可以人为地给一个节点加属性嘛，不过省却了几句代码而已。

效果图如下所示:

演示代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Jquery图片展示焦点图</title> <style type="text/css"> *{ margin:0px; padding:0px; list-style:none; border:0px;} body{ font-size:12px; color:white;} #imageShow{ position:relative; width:586px; height:150px; z-index:1; overflow:hidden;} #imageShow #imageSwitch{ position:absolute; right:0px; bottom:0px; padding-left:50px; z-index:2; background-color:#C08A93; filter: Alpha(opacity=70); opacity:0.7;} #imageShow #imageSwitch li{ float:left; border-left:1px solid white; width:30px; height:14px; line-height:14px; text-align:center;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $imageShow=$('#imageShow'); $images=$('#imageSrc li',$imageShow); $imageSwitches=$('#imageSwitch li',$imageShow); if($images.size()>0){ init(); var timer=setInterval(autoSwitch,3000); $imageSwitches.each(function(index,item){ $(item).click(function(){ clearInterval(timer); setTimeout(function(){timer=setInterval(autoSwitch,3000)},3000); $imageSwitches.css('background-color','').eq(index).css('background-color','#E22E51'); if(index!=$imageShow.data('show')){ $imageShow.data('show',index); $images.hide().eq(index).fadeIn('slow'); } }); }); } function autoSwitch(){ $nowIndex=$imageShow.data('show')+1; if($images.size()>$nowIndex){ $imageSwitches.css('background-color','').eq($nowIndex).css('background-color','#E22E51'); $imageShow.data('show',$nowIndex); $images.hide().eq($nowIndex).fadeIn('slow'); }else{ init(); } } function init(){ $imageShow.data('show',0); $images.hide().eq(0).fadeIn('slow'); $imageSwitches.css('background-color','').eq(0).css('background-color','#E22E51'); } }); </script> </head> <body> <div id="imageShow"> <ul id="imageSrc"> <li><img src="//img.jbzj.com/demoimg/201005/o_1.gif"></li> <li><img src="//img.jbzj.com/demoimg/201005/o_2.gif"></li> <li><img src="//img.jbzj.com/demoimg/201005/o_3.gif"></li> <li><img src="//img.jbzj.com/demoimg/201005/o_4.gif"></li> <li><img src="//img.jbzj.com/demoimg/201005/o_5.gif"></li> </ul> <ul id="imageSwitch"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jquery.validate使用攻略第二部
jQuery.validate.js API说明
2010-07-07
ASP SQL防注入的方法
前一篇我们介绍了一种防SQL注入的终极方法，也就是最原始、最简单、最有效也是最通用的方法，就是数据类型的检查加单引号的处理，具体的内容前面一篇已经介绍过了，这里我就不重复了
2008-12-12
Jquery解析Json格式数据过程代码
Json是一种轻量级的数据交换格式，本节为大家介绍的是Jquery解析Json格式数据的过程，很详细，看看就知道了
2014-10-10
Jquery修改image的src属性,图片不加载问题的解决方法
下面小编就为大家带来一篇Jquery修改image的src属性,图片不加载问题的解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05
jQuery针对各类元素操作基础教程
这篇文章主要介绍了jQuery针对各类元素操作基础,包括jQuery基础操作、选择要操作的元素及处理DOM元素等,是深入学习jQuery所必备的基础技能,需要的朋友可以参考下
2014-08-08
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
这篇文章主要介绍了jquery实现页面百叶窗走马灯式翻滚显示效果的方法,实例分析了jQuery操作百叶窗翻滚效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
原生Aajax 和jQuery Ajax 写法个人总结
AJAX:即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。本文重点给大家介绍原生Aajax 和jQuery Ajax 个人总结，一起看看吧
2017-03-03
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
本篇文章主要介绍了easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能，对于Javascript教程感兴趣的同学可以参考一下
2016-08-08
jQueryUI DatePicker 添加时分秒
本文主要介绍jQueryUI DatePicker添加时分秒的方法，简单实用，需要的朋友可以参考下。
2016-06-06
非常棒的10款jQuery 幻灯片插件
这篇文章与大家分享的是10款非常棒的 jQuery 幻灯片插件，使用这些插件可以帮助你在网站中加入非常吸引人的幻灯片效果，另外这些插件还有制作教程。
2011-06-06