中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jquery圖片輪播

發布時間：2020-06-04 18:27:45 來源：網絡 閱讀：720 作者：huxiaoqi567 欄目：web開發

 效果圖：

jquery圖片輪播


  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>jquery switchable圖片輪播</title> 
  6. <link rel='stylesheet' href='css/reset.css'> 
  7. <style type="text/css"> 
  8. .ui-switchable{ 
  9.     margin:0px auto; 
  10.     width:690px;  
  11.     height:260px; 
  12.     border: 1px solid; 
  13.     overflow: hidden;    
  14. } 
  15. .ui-switchable ul{ 
  16.     position: relative;  
  17.  width:130px; 
  18.  top:-260px; 
  19.  left:560px; 
  20. } 
  21. .ui-switchable ul li a{ 
  22.     display: block; 
  23.     width:130px; 
  24.     height:33px; 
  25.     background:#fff; 
  26.     color:#666; 
  27.     text-align: center; 
  28.     letter-spacing: 1px; 
  29.     line-height: 33px; 
  30. } 
  31. .ui-switchable ul li a.cur{ 
  32.     background: #AA0000; 
  33.     color:#fff; 
  34.     text-decoration: underline; 
  35. } 
  36. .ui-switchable-content-wrapper{ 
  37.     width:560px; 
  38.     height:260px; 
  39.     position: relative; 
  40. } 
  41. .ui-switchable .ui-switchable-content{ 
  42.     width:0px; 
  43.     height:0px; 
  44.     position: relative; 
  45. } 
  46. </style> 
  47. <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> 
  48. <script type="text/javascript"> 
  49. (function($){ 
  50.     $.fn.Switchable = function(config){ 
  51.         var self,li,a,content,fn,cur,firstImg,curIndex = 0,len = 0;  
  52.         var _cfg = {effect:'fade'}; 
  53.         var _config = $.extend({},_cfg,config); 
  54.         self = this;     
  55.         li = $('ul li',self); 
  56.         a = $('a',li); 
  57.         len = li.length; 
  58.         firstImg = a.eq(0); 
  59.         content = $("<div class='ui-switchable-content-wrapper'><img class='ui-switchable-content'></img></div>"); 
  60.         //展示第一張圖片 
  61.         content.prependTo($(self)).find('img').attr('src',firstImg.attr('imgsrc'));  
  62.         show(curIndex); 
  63.         fn = setInterval(show,4000); 
  64.         a.bind('click',function(){ 
  65.             curIndex = a.index($(this)); 
  66.             show(); 
  67.         }); 
  68.         a.bind({ 
  69.             'mouseenter':function(){ 
  70.                 clearInterval(fn); 
  71.              },'mouseleave':function(){ 
  72.                  fn = setInterval(show,4000); 
  73.              } 
  74.         }); 
  75.          
  76.         function show(){ 
  77.             cur = $('ul li a',self).eq(curIndex); 
  78.             var src = cur.attr('imgsrc'); 
  79.             cur.addClass('cur').parent().siblings().find('a').removeClass('cur'); 
  80.             content.find('img').attr('src',src).css({width:'0px',height:'0px',left:'280px',top:'130px'}).animate({width:'560px',height:'260px',left:'0px',top:'0px'},300,function(){ 
  81.  
  82.             }); 
  83.             curIndex == len-1? curIndex=0:curIndex++; 
  84.         }; 
  85.     }; 
  86. })(jQuery); 
  87. </script> 
  88. </head> 
  89. <body> 
  90. <div id='demo1' class='ui-switchable'> 
  91.     <ul> 
  92.         <li><a href='#' imgsrc='p_w_picpaths/01.JPG'>9折話費</a></li> 
  93.         <li><a href='#' imgsrc='p_w_picpaths/02.JPG'>年終風暴</a></li> 
  94.         <li><a href='#' imgsrc='p_w_picpaths/03.JPG'>item3</a></li> 
  95.         <li><a href='#' imgsrc='p_w_picpaths/04.JPG'>item4</a></li> 
  96.         <li><a href='#' imgsrc='p_w_picpaths/01.JPG'>item5</a></li> 
  97.         <li><a href='#' imgsrc='p_w_picpaths/02.JPG'>item6</a></li> 
  98.         <li><a href='#' imgsrc='p_w_picpaths/03.JPG'>item7</a></li> 
  99.         <li><a href='#' imgsrc='p_w_picpaths/04.JPG'>item8</a></li> 
  100.     </ul> 
  101. </div> 
  102. <script type="text/javascript"> 
  103. $(function(){ 
  104.     $('#demo1').Switchable(); 
  105. }); 
  106. </script> 
  107. </body> 
  108. </html> 

 

向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
九江市| 大洼县| 全南县| 北安市| 女性| 兴宁市| 青冈县| 伽师县| 汉寿县| 辽阳市| 青州市| 收藏| 西丰县| 邹城市| 阿尔山市| 京山县| 阿坝县| 通河县| 湘潭市| 乐业县| 随州市| 缙云县| 乳山市| 永嘉县| 德兴市| 集贤县| 呼和浩特市| 张家川| 南丹县| 仁化县| 休宁县| 裕民县| 恩施市| 南宫市| 金阳县| 东阳市| 酒泉市| 通河县| 平武县| 巩留县| 沂南县|