jQuery图片轮播大小变动

来源:https://www.sucaihuo.com/js/2264.html 2017-07-01 06:19浏览(1581) 收藏

大小变动的banner,每轮播或点击一次,看看有啥变化。该轮播插件很新颖,提供给大家学习.
jQuery图片轮播大小变动
分类:图片代码 > 图片轮播 难易:入门级
查看演示 下载资源 下载积分: 40 积分

banner列表

<div class="banner">
	<ul class="banList">
		<li class="active"><a href="http://www.sucaihuo.com/"><img src="images/img1.jpg"/></a></li>
		<li><a href="http://www.sucaihuo.com/"><img src="images/img2.jpg"/></a></li>
		<li><a href="http://www.sucaihuo.com/"><img src="images/img3.jpg"/></a></li>
	</ul>
	<div class="fomW">
		<div class="jsNav">
			<a href="javascript:;" class="trigger current"></a>
			<a href="javascript:;" class="trigger"></a>
			<a href="javascript:;" class="trigger"></a>
		</div>
	</div>
</div>

banner插件

(function ($) {
   $.fn.swBanner=function(options){
     var defaults={
	     animateTime:300,
		 delayTime:5000
	 }
   var setting=$.extend({},defaults,options);
   
   return this.each(function(){
      $obj=$(this);
	  var o=setting.animateTime;
	  var d=setting.delayTime;
	  var $oban=$obj.find(".banList li");
	  var _len=$oban.length;
	  var $nav=$obj.find(".fomW a");
	  var _index=0;
	  var timer;
	  //图片轮换
	  function showImg(n){
	     $oban.eq(n).addClass("active").siblings().removeClass("active");
		 $nav.eq(n).addClass("current").siblings().removeClass("current");
	  }
	  //自动播放
	  function player(){
	    timer=setInterval(function(){
		   var _index=$obj.find(".fomW").find("a.current").index();
		   showImg((_index+1)%_len);
		},d)
	  }
	  //
	  $nav.click(function(){
	     if(!($oban.is(":animated"))){
	     _index=$(this).index();
		 showImg(_index);
		 }
	  });
	  //
	  $oban.hover(function(){
	    clearInterval(timer);
	  
	  },function(){
	    player();
	  
	  });
	   player();
   });
   
   }
})(jQuery);

调用banner,

$(function(){
	$(".banner").swBanner();
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2