Code666 (代码贴、代码片段)

[JavaScript] [jQuery]两个基于jQuery的渐隐渐显图片轮换幻灯片 →→→→→进入此内容的聊天室

来自 , 2019-04-24, 写在 JavaScript, 查看 109 次.
URL http://www.code666.cn/view/8336041a
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>两个基于jQuery的渐隐渐显图片轮换幻灯片</title>
  5. <style>
  6. div,ul, ol, li, h1,h2, p{margin:0;padding:0}
  7. body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.2}
  8. a{color:#047;text-decoration:none}
  9. a:hover{color:#a40000;text-decoration:none}
  10. h1{font-size:1em; font-weight:normal; line-height:1.8em}
  11. h1 a{background:#CFF; padding:2px 3px; text-decoration:none}
  12. h1 a:hover{background:#eee; text-decoration:underline}
  13. h2{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto}
  14. ul,li{list-style:none}
  15. /*第一个幻灯样式*/
  16. #i_focus{width:460px; height:231px;background:#eee; padding:5px 5px 0 5px; margin:0 auto }
  17. #i_focus_pic{width:376px; height:226px;display:inline; position:relative;float:left;overflow:hidden}
  18. #i_focus_piclist { position:absolute}
  19. #i_focus_piclist li { width:378px; height:226px; overflow:hidden; display:none}
  20. #i_focus_piclist img { width:374px; height:224px; border:1px solid #fff}
  21. #i_focus_btn {float:right; width:77px}
  22. #i_focus_btn li {cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)}
  23. #i_focus_btn img { width:75px; height:70px; border:1px solid #fff; margin-bottom:2px}
  24. #i_focus_btn .i_cur {opacity:1; -moz-opacity:1; filter:alpha(opacity=100)}
  25. #i_focus_opdiv { position:absolute; left:0; bottom:0; width:374px; height:40px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); border:1px solid #fff; border-top:0}
  26. #i_focus_tx span{font-family:"微软雅黑"; font-size:16px; font-weight:bold; line-height:22px; display:block}
  27. #i_focus_tx { position:absolute; left:8px; bottom:2px; color:#FFF}
  28. #i_focus_tx .normal {display:none}
  29. /*第二个幻灯样式*/
  30. .slides { position:relative; overflow:hidden; width:704px; height:250px; border:5px solid #eee; margin:0 auto }
  31. .slide-pic{ overflow:hidden;width:703px}
  32. .slide-pic img{ width:701px; height:248px;border:1px solid #E4E4E4}
  33. .slide-pic li { display:none}
  34. .slide-pic li.cur { display:block}
  35. .slide-li { position:absolute; left:0; bottom:0; }
  36. .slide-li li { float:left; width:175px; height:30px; line-height:30px; margin-right:1px; text-align:center}
  37. .slide-li a:visited,.slide-li a:link { display:block; width:174px; height:30px; font-size:14px; color:#FFF}
  38. .slide-li .cur a:visited, .slide-li .cur a:link, .slide-li a:hover { color:#333; text-decoration:none}
  39. .op li { background:#666; opacity: 0.6; filter:alpha(opacity=60)}
  40. .op li.cur { background:#FFF}
  41. .slide-txt span { display:none}
  42. </style>
  43. </head>
  44. <body class="box">
  45. <h2>两个基于jQuery的渐隐渐显图片轮换幻灯片——如果不运行请刷新页面</h2>
  46. <!--*第一个幻灯*-->
  47. <div id="i_focus">
  48. <div id="i_focus_pic">
  49. <ul id="i_focus_piclist" style="left:0; top:0;">
  50. <li><a href="#" target="_blank"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407362.jpg" alt="提示" /></a></li>
  51. <li><a href="#" target="_blank"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407744.jpg" alt="提示" /></a></li>
  52. <li><a href="#" target="_blank"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407527.jpg" alt="提示" /></a></li>
  53. </ul>
  54. <div id="i_focus_opdiv"></div>
  55. <!--slide大图374*224-->
  56. <ul id="i_focus_tx">
  57. <li class="normal"><span>Springs Best Accessories</span>The 7 key trends for the season b2</li>
  58. <li class="normal"><span>HAHA OHOH</span>THINK EVERY DAY</li>
  59. <li class="normal"><span>Okay okay okay okay</span>scrip jquery ue seo</li>
  60. </ul>
  61. </div>
  62. <!--slide右侧小缩略图75*70-->
  63. <ul id="i_focus_btn">
  64. <li class="i_cur" id="p0"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407362.jpg" alt="提示" /></li>
  65. <li id="p1"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407744.jpg" alt="提示" /></li>
  66. <li id="p2"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407527.jpg" alt="提示" /></li>
  67. </ul>
  68. </div>
  69. <!--//end-->
  70. <br />
  71. <!--*第二个幻灯*-->
  72. <div class="slides">
  73.   <ul class="slide-pic">
  74.     <li><a href="#"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407197.jpg" alt="Modified@Mr.Think" /></a></li>
  75.     <li class="cur"><a href="#"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407297.jpg" alt="专注前端技术" /></a></li>
  76.     <li><a href="#"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407297.jpg" alt="天边夕阳再次映上" /></a></li>
  77.     <li><a href="#"><img src=http://www.ijingxuan.com/uploadfile/2011/1228/20111228080407528.jpg" alt="曾梦想仗剑走天涯" /></a></li>
  78.   </ul>
  79.   <ul class="slide-li op">
  80.     <li></li>
  81.     <li class="cur"></li>
  82.     <li></li>
  83.     <li></li>
  84.   </ul>
  85.   <ul class="slide-li slide-txt">
  86.     <li><a href="#">Modified@Mr.Think</a></li>
  87.     <li class="cur"><a href="#">专注前端技术</a></li>
  88.     <li><a href="#">天边夕阳再次映上</a></li>
  89.     <li><a href="#">曾梦想仗剑走天涯</a></li>
  90.   </ul>
  91. </div>      
  92. <!--//end-->  
  93. <script src="/ajaxjs/jquery1.3.2.js"></script>
  94. <script>
  95. $(document).ready(function() {
  96.     var i_curIndex = 0;
  97.     var beauBeauSlide; //函数对象
  98.     var i_curID = 0; //取得鼠标下方的对象ID
  99.     var pictureID = 0; //索引ID
  100.     $("#i_focus_piclist li").eq(0).show(); //默认
  101.     autoScroll();
  102.     $("#i_focus_btn li").hover(function() {
  103.         StopScrolll();
  104.         $("#i_focus_btn li").removeClass("i_cur") //所有的li去掉当前的样式加上正常的样式
  105.         $(this).addClass("i_cur"); //而本身则加上当前的样式去掉正常的样式
  106.         i_curID = $(this).attr("id"); //取当前元素的ID
  107.         pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符
  108.         $("#i_focus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示
  109.         $("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏
  110.         $("#i_focus_tx li").hide();
  111.         $("#i_focus_tx li").eq(pictureID).show();
  112.  
  113.     },
  114.     function() {
  115.         //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
  116.         i_curID = $(this).attr("id"); //取当前元素的ID
  117.         pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符
  118.         i_curIndex = pictureID;
  119.         autoScroll();
  120.     });
  121.     //自动滚动
  122.     function autoScroll() {
  123.         $("#i_focus_btn li:last").removeClass("i_cur");
  124.         $("#i_focus_tx li:last").hide();
  125.         $("#i_focus_btn li").eq(i_curIndex).addClass("i_cur");
  126.         $("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur");
  127.         $("#i_focus_tx li").eq(i_curIndex).show();
  128.         $("#i_focus_tx li").eq(i_curIndex - 1).hide();
  129.         $("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow");
  130.         $("#i_focus_piclist li").eq(i_curIndex - 1).hide();
  131.         i_curIndex++;
  132.         i_curIndex = i_curIndex >= 3 ? 0 : i_curIndex;
  133.         beauBeauSlide = setTimeout(autoScroll, 2000);
  134.     }
  135.     function StopScrolll() //当鼠标移动到对象上面的时候停止自动滚动
  136.     {
  137.         clearTimeout(beauBeauSlide);
  138.     }
  139. });
  140. //第二个渐隐幻灯开始
  141. var defaultOpts = {
  142.     interval: 3000,
  143.     fadeInTime: 300,
  144.     fadeOutTime: 200
  145. };
  146.  
  147. var _titles = $("ul.slide-txt li");
  148. var _titles_bg = $("ul.op li");
  149. var _bodies = $("ul.slide-pic li");
  150. var _count = _titles.length;
  151. var _current = 0;
  152. var _intervalID = null;
  153. var stop = function() {
  154.     window.clearInterval(_intervalID);
  155. };
  156. var slide = function(opts) {
  157.     if (opts) {
  158.         _current = opts.current || 0;
  159.     } else {
  160.         _current = (_current >= (_count - 1)) ? 0 : (++_current);
  161.     };
  162.     _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,
  163.     function() {
  164.         _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
  165.         _bodies.removeClass("cur").eq(_current).addClass("cur");
  166.     });
  167.     _titles.removeClass("cur").eq(_current).addClass("cur");
  168.     _titles_bg.removeClass("cur").eq(_current).addClass("cur");
  169. }; //endof slide
  170. var go = function() {
  171.     stop();
  172.     _intervalID = window.setInterval(function() {
  173.         slide();
  174.     },
  175.     defaultOpts.interval);
  176. }; //endof go
  177. var itemMouseOver = function(target, items) {
  178.     stop();
  179.     var i = $.inArray(target, items);
  180.     slide({
  181.         current: i
  182.     });
  183. }; //endof itemMouseOver
  184. _titles.hover(function() {
  185.     if ($(this).attr('class') != 'cur') {
  186.         itemMouseOver(this, _titles);
  187.     } else {
  188.         stop();
  189.     }
  190. },
  191. go);
  192. //_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);
  193. _bodies.hover(stop, go);
  194. go();
  195. var slideX = {
  196.     _this: $('.catalog .imgbox'),
  197.     _btnLeft: $('.catalog .left'),
  198.     _btnRight: $('.catalog .right'),
  199.     init: function() {
  200.         slideX._btnLeft.click(slideX.slideLeft);
  201.         slideX._btnRight.click(slideX.slideRight);
  202.     },
  203.     slideLeft: function() {
  204.         slideX._btnLeft.unbind('click', slideX.slideLeft);
  205.         for (i = 0; i < 2; i++) {
  206.             slideX._this.find('li:last').prependTo(slideX._this);
  207.         }
  208.         slideX._this.css('marginLeft', -224);
  209.         slideX._this.animate({
  210.             'marginLeft': 0
  211.         },
  212.         500,
  213.         function() {
  214.             slideX._btnLeft.bind('click', slideX.slideLeft);
  215.         });
  216.         return false;
  217.     },
  218.     slideRight: function() {
  219.         slideX._btnRight.unbind('click', slideX.slideRight);
  220.         slideX._this.animate({
  221.             'marginLeft': -224
  222.         },
  223.         500,
  224.         function() {
  225.             slideX._this.css('marginLeft', '0');
  226.             for (i = 0; i < 2; i++) {
  227.                 slideX._this.find('li:first').appendTo(slideX._this)
  228.             }
  229.             slideX._btnRight.bind('click', slideX.slideRight);
  230.         });
  231.         return false;
  232.     }
  233. }
  234. $(document).ready(function() {
  235.     slideX.init();
  236. })
  237. $(document).ready(function() {
  238.     var newTime = new Date();
  239.     var newTime = newTime.getTime();
  240.     var $imgTmp = $('#topromotion').find('img:first');
  241.     var osrc = $imgTmp.attr('src');
  242.     $imgTmp.attr('src', osrc + '?' + newTime);
  243. });
  244. </script>
  245. </body>
  246. </html>
  247. //javascript/1087

回复 "[jQuery]两个基于jQuery的渐隐渐显图片轮换幻灯片"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666