当前位置:96看吧 > 实用代码 > 焦点图 > 淡入淡出的五屏jQuery焦点图代码

淡入淡出的五屏jQuery焦点图代码

时间:2013/07/04
作者:裸色工作室
来源:裸色工作室
查看:

淡入淡出的五屏jQuery焦点图代码

焦点图属于jQuery焦点图,有淡入淡出变换效果、支持五屏图片切换,使用jQuery+CSS实现的,兼容IE6、7、8、9及FF、Chrome浏览器等,96看吧推荐下载该焦点图。

该焦点图的使用方法,一段style代码、引入jQuery脚本库、一段基于jQuery写的效果代码:

style代码部分:

  1. <style type="text/css"
  2. body { margin0pxpadding0px; } 
  3. img { border0px; } 
  4. #banner { margin30px auto 0px autopadding0pxwidth950pxheight400px; } 
  5. .slides { margin0px autowidth950pxheight400pxoverflowhiddenpositionrelative; } 
  6. .slide-pic { margin0pxpadding0pxwidth950pxoverflowhiddenlist-stylenone; } 
  7. .slide-pic img { width950pxheight400px; } 
  8. .slide-pic li { displaynone; } 
  9. .slide-pic li.cur { displayblock; } 
  10. .slide-li { margin0pxpadding0px; left: 0px; bottom: 0pxpositionabsolute; } 
  11. .slide-li li { margin0pxpadding0pxwidth190pxheight10pxfloatleftoverflowhiddenlist-stylenone; } 
  12. .slide-li a { width190pxheight10pxcolor#000font-size12pxdisplayblock; } 
  13. .slide-li a:hover { color#F00text-decorationnone; } 
  14. .op li { background#999999; filter: alpha(opacity=60); opacity: 0.6; } 
  15. .op li.cur { background#666666; } 
  16. .slide-txt span { displaynone; } 
  17. </style> 

基于jQuery写的效果代码部分:

  1. <script type="text/javascript"
  2. jQuery(function ($) { 
  3.     if ($(".slide-pic").length > 0) { 
  4.         var defaultOpts = { interval: 5000, fadeInTime: 300, fadeOutTime: 200 }; 
  5.         var _titles = $("ul.slide-txt li"); 
  6.         var _titles_bg = $("ul.op li"); 
  7.         var _bodies = $("ul.slide-pic li"); 
  8.         var _count = _titles.length; 
  9.         var _current = 0; 
  10.         var _intervalID = null
  11.         var stop = function () { window.clearInterval(_intervalID); }; 
  12.         var slide = function (opts) { 
  13.             if (opts) { 
  14.                 _current = opts.current || 0; 
  15.             } else { 
  16.                 _current = (_current >= (_count - 1)) ? 0 : (++_current); 
  17.             }; 
  18.             _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function () { 
  19.                 _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime); 
  20.                 _bodies.removeClass("cur").eq(_current).addClass("cur"); 
  21.             }); 
  22.             _titles.removeClass("cur").eq(_current).addClass("cur"); 
  23.             _titles_bg.removeClass("cur").eq(_current).addClass("cur"); 
  24.         }; 
  25.         var go = function () { 
  26.             stop(); 
  27.             _intervalID = window.setInterval(function () { slide(); }, defaultOpts.interval); 
  28.         }; 
  29.         var itemMouseOver = function (target, items) { 
  30.             stop(); 
  31.             var i = $.inArray(target, items); 
  32.             slide({ current: i }); 
  33.         }; 
  34.         _titles.hover(function () { if ($(this).attr('class') != 'cur') { itemMouseOver(this, _titles); } else { stop(); } }, go); 
  35.         _bodies.hover(stop, go); 
  36.         go(); 
  37.     } 
  38. }); 
  39. </script> 

 

上一篇:放大镜特效的jQuery焦点图
下一篇:flash+xml焦点图代码
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门