JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图
 点击预览  点击下载

JQuery代码

  1. <script type="text/javascript"
  2.     $(function() { 
  3.         var $banner = $('.banner'); 
  4.         var $banner_ul = $('.banner-img'); 
  5.         var $btn = $('.banner-btn'); 
  6.         var $btn_a = $btn.find('a'var v_width = $banner.width(); 
  7.   
  8.         var page = 1; 
  9.   
  10.         var timer = null
  11.         var btnClass = null
  12.   
  13.         var page_count = $banner_ul.find('li').length; //把这个值赋给小圆点的个数 
  14.         var banner_cir = "<li class='selected' href='#'><a></a></li>"
  15.         for (var i = 1; i < page_count; i++) { 
  16.             //动态添加小圆点 
  17.             banner_cir += "<li><a href='#'></a></li>"
  18.         } 
  19.         $('.banner-circle').append(banner_cir); 
  20.   
  21.         var cirLeft = $('.banner-circle').width() * ( - 0.5); 
  22.         $('.banner-circle').css({ 
  23.             'marginLeft': cirLeft 
  24.         }); 
  25.   
  26.         $banner_ul.width(page_count * v_width); 
  27.   
  28.         function move(obj, classname) { 
  29.             //手动及自动播放 
  30.             if (!$banner_ul.is(':animated')) { 
  31.                 if (classname == 'prevBtn') { 
  32.                     if (page == 1) { 
  33.                         $banner_ul.animate({ 
  34.                             left: -v_width * (page_count - 1) 
  35.                         }); 
  36.                         page = page_count; 
  37.                         cirMove(); 
  38.                     } else { 
  39.                         $banner_ul.animate({ 
  40.                             left: '+=' + v_width 
  41.                         }, 
  42.                         "slow"); 
  43.                         page--; 
  44.                         cirMove(); 
  45.                     } 
  46.                 } else { 
  47.                     if (page == page_count) { 
  48.                         $banner_ul.animate({ 
  49.                             left: 0 
  50.                         }); 
  51.                         page = 1; 
  52.                         cirMove(); 
  53.                     } else { 
  54.                         $banner_ul.animate({ 
  55.                             left: '-=' + v_width 
  56.                         }, 
  57.                         "slow"); 
  58.                         page++; 
  59.                         cirMove(); 
  60.                     } 
  61.                 } 
  62.             } 
  63.         } 
  64.   
  65.         function cirMove() { 
  66.             //检测page的值,使当前的page与selected的小圆点一致 
  67.             $('.banner-circle li').eq(page - 1).addClass('selected').siblings().removeClass('selected'); 
  68.         } 
  69.   
  70.         $banner.mouseover(function() { 
  71.             $btn.css({ 
  72.                 'display''block' 
  73.             }); 
  74.             clearInterval(timer); 
  75.         }).mouseout(function() { 
  76.             $btn.css({ 
  77.                 'display''none' 
  78.             }); 
  79.             clearInterval(timer); 
  80.             timer = setInterval(move, 3000); 
  81.         }).trigger("mouseout"); //激活自动播放 
  82.         $btn_a.mouseover(function() { 
  83.             //实现透明渐变,阻止冒泡 
  84.             $(this).animate({ 
  85.                 opacity: 0.6 
  86.             }, 
  87.             'fast'); 
  88.             $btn.css({ 
  89.                 'display''block' 
  90.             }); 
  91.             return false
  92.         }).mouseleave(function() { 
  93.             $(this).animate({ 
  94.                 opacity: 0.3 
  95.             }, 
  96.             'fast'); 
  97.             $btn.css({ 
  98.                 'display''none' 
  99.             }); 
  100.             return false
  101.         }).click(function() { 
  102.             //手动点击清除计时器 
  103.             btnClass = this.className; 
  104.             clearInterval(timer); 
  105.             timer = setInterval(move, 3000); 
  106.             move($(this), this.className); 
  107.         }); 
  108.   
  109.         $('.banner-circle li').live('click'
  110.         function() { 
  111.             var index = $('.banner-circle li').index(this); 
  112.             $banner_ul.animate({ 
  113.                 left: -v_width * index 
  114.             }, 
  115.             'slow'); 
  116.             page = index + 1; 
  117.             cirMove(); 
  118.         }); 
  119.     }); 
  120. </script> 

HTML代码

  1. <div class="banner"> 
  2.     <div class="banner-btn"> 
  3.         <a href="javascript:;" class="prevBtn"><i></i></a> 
  4.         <a href="javascript:;" class="nextBtn"><i></i></a> 
  5.     </div> 
  6.     <ul class="banner-img"> 
  7.         <li><a href="#"><img src="img/1.jpg"></a></li> 
  8.         <li><a href="#"><img src="img/2.jpg"></a></li> 
  9.         <li><a href="#"><img src="img/3.jpg"></a></li> 
  10.         <li><a href="#"><img src="img/4.jpg"></a></li> 
  11.         <li><a href="#"><img src="img/5.jpg"></a></li> 
  12.         <li><a href="#"><img src="img/6.jpg"></a></li> 
  13.     </ul> 
  14.     <ul class="banner-circle"></ul> 
  15. </div> 

转载请注明:代码家园 » JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)