温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery图片轮播

发布时间:2020-06-04 18:27:45 来源:网络 阅读:719 作者: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. .ui-switchable ul{ 
  15.     position: relative;  
  16.  width:130px; 
  17.  top:-260px; 
  18.  left:560px; 
  19. .ui-switchable ul li a{ 
  20.     display: block; 
  21.     width:130px; 
  22.     height:33px; 
  23.     background:#fff; 
  24.     color:#666; 
  25.     text-align: center; 
  26.     letter-spacing: 1px; 
  27.     line-height: 33px; 
  28. .ui-switchable ul li a.cur{ 
  29.     background: #AA0000; 
  30.     color:#fff; 
  31.     text-decoration: underline; 
  32. .ui-switchable-content-wrapper{ 
  33.     width:560px; 
  34.     height:260px; 
  35.     position: relative; 
  36. .ui-switchable .ui-switchable-content{ 
  37.     width:0px; 
  38.     height:0px; 
  39.     position: relative; 
  40. </style> 
  41. <script type="text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script> 
  42. <script type="text/javascript"> 
  43. (function($){ 
  44.     $.fn.Switchable = function(config){ 
  45.         var self,li,a,content,fn,cur,firstImg,curIndex = 0,len = 0;  
  46.         var _cfg = {effect:'fade'}; 
  47.         var _config = $.extend({},_cfg,config); 
  48.         self = this;     
  49.         li = $('ul li',self); 
  50.         a = $('a',li); 
  51.         len = li.length; 
  52.         firstImg = a.eq(0); 
  53.         content = $("<div class='ui-switchable-content-wrapper'><img class='ui-switchable-content'></img></div>"); 
  54.         //展示第一张图片 
  55.         content.prependTo($(self)).find('img').attr('src',firstImg.attr('imgsrc'));  
  56.         show(curIndex); 
  57.         fn = setInterval(show,4000); 
  58.         a.bind('click',function(){ 
  59.             curIndex = a.index($(this)); 
  60.             show(); 
  61.         }); 
  62.         a.bind({ 
  63.             'mouseenter':function(){ 
  64.                 clearInterval(fn); 
  65.              },'mouseleave':function(){ 
  66.                  fn = setInterval(show,4000); 
  67.              } 
  68.         }); 
  69.          
  70.         function show(){ 
  71.             cur = $('ul li a',self).eq(curIndex); 
  72.             var src = cur.attr('imgsrc'); 
  73.             cur.addClass('cur').parent().siblings().find('a').removeClass('cur'); 
  74.             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(){ 
  75.  
  76.             }); 
  77.             curIndex == len-1? curIndex=0:curIndex++; 
  78.         }; 
  79.     }; 
  80. })(jQuery); 
  81. </script> 
  82. </head> 
  83. <body> 
  84. <div id='demo1' class='ui-switchable'> 
  85.     <ul> 
  86.         <li><a href='#' imgsrc='p_w_picpaths/01.JPG'>9折话费</a></li> 
  87.         <li><a href='#' imgsrc='p_w_picpaths/02.JPG'>年终风暴</a></li> 
  88.         <li><a href='#' imgsrc='p_w_picpaths/03.JPG'>item3</a></li> 
  89.         <li><a href='#' imgsrc='p_w_picpaths/04.JPG'>item4</a></li> 
  90.         <li><a href='#' imgsrc='p_w_picpaths/01.JPG'>item5</a></li> 
  91.         <li><a href='#' imgsrc='p_w_picpaths/02.JPG'>item6</a></li> 
  92.         <li><a href='#' imgsrc='p_w_picpaths/03.JPG'>item7</a></li> 
  93.         <li><a href='#' imgsrc='p_w_picpaths/04.JPG'>item8</a></li> 
  94.     </ul> 
  95. </div> 
  96. <script type="text/javascript"> 
  97. $(function(){ 
  98.     $('#demo1').Switchable(); 
  99. }); 
  100. </script> 
  101. </body> 
  102. </html> 

 

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI