JQuery代碼

<script?type="text/javascript">?$(function()?{?var?$banner?=?$('.banner');?var?$banner_ul?=?$('.banner-img');?var?$btn?=?$('.banner-btn');?var?$btn_a?=?$btn.find('a')?var?v_width?=?$banner.width();?var?page?=?1;?var?timer?=?null;?var?btnClass?=?null;?var?page_count?=?$banner_ul.find('li').length;?//把這個值賦給小圓點的個數?var?banner_cir?=?"<li?class='selected'?href='#'><a></a></li>";?for?(var?i?=?1;?i?<?page_count;?i++)?{?//動態添加小圓點?banner_cir?+=?"<li><a?href='#'></a></li>";?}?$('.banner-circle').append(banner_cir);?var?cirLeft?=?$('.banner-circle').width()?*?(?-?0.5);?$('.banner-circle').css({?'marginLeft':?cirLeft?});?$banner_ul.width(page_count?*?v_width);?function?move(obj,?classname)?{?//手動及自動播放?if?(!$banner_ul.is(':animated'))?{?if?(classname?==?'prevBtn')?{?if?(page?==?1)?{?$banner_ul.animate({?left:?-v_width?*?(page_count?-?1)?});?page?=?page_count;?cirMove();?}?else?{?$banner_ul.animate({?left:?'+='?+?v_width?},?"slow");?page--;?cirMove();?}?}?else?{?if?(page?==?page_count)?{?$banner_ul.animate({?left:?0?});?page?=?1;?cirMove();?}?else?{?$banner_ul.animate({?left:?'-='?+?v_width?},?"slow");?page++;?cirMove();?}?}?}?}?function?cirMove()?{?//檢測page的值，使當前的page與selected的小圓點一致?$('.banner-circle?li').eq(page?-?1).addClass('selected').siblings().removeClass('selected');?}?$banner.mouseover(function()?{?$btn.css({?'display':?'block'?});?clearInterval(timer);?}).mouseout(function()?{?$btn.css({?'display':?'none'?});?clearInterval(timer);?timer?=?setInterval(move,?3000);?}).trigger("mouseout");?//激活自動播放?$btn_a.mouseover(function()?{?//實現透明漸變，阻止冒泡?$(this).animate({?opacity:?0.6?},?'fast');?$btn.css({?'display':?'block'?});?return?false;?}).mouseleave(function()?{?$(this).animate({?opacity:?0.3?},?'fast');?$btn.css({?'display':?'none'?});?return?false;?}).click(function()?{?//手動點擊清除計時器?btnClass?=?this.className;?clearInterval(timer);?timer?=?setInterval(move,?3000);?move($(this),?this.className);?});?$('.banner-circle?li').live('click',?function()?{?var?index?=?$('.banner-circle?li').index(this);?$banner_ul.animate({?left:?-v_width?*?index?},?'slow');?page?=?index?+?1;?cirMove();?});?});? </script>

更多JQUEYR幻燈片,JS幻燈片，請訪問代碼家園

HTML

<div?class="banner">?<div?class="banner-btn">?<a?href="javascript:;"?class="prevBtn"><i></i></a>?<a?href="javascript:;"?class="nextBtn"><i></i></a>?</div>?<ul?class="banner-img">?<li><a?href="#"><img?src="img/1.jpg"></a></li>?<li><a?href="#"><img?src="img/2.jpg"></a></li>?<li><a?href="#"><img?src="img/3.jpg"></a></li>?<li><a?href="#"><img?src="img/4.jpg"></a></li>?<li><a?href="#"><img?src="img/5.jpg"></a></li>?<li><a?href="#"><img?src="img/6.jpg"></a></li>?</ul>?<ul?class="banner-circle"></ul>? </div>

轉載請注明：代碼家園??JQuery仿最新淘寶網首頁帶箭頭幻燈片,JQuery輪播圖?
本文原地址：http://www.daimajiayuan.com/sitejs-18360-1.html

轉載于:https://blog.51cto.com/3285518/1439908

總結

以上是生活随笔為你收集整理的JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。