banner列表

<div class="banner">
	<ul class="banList">
		<li class="active"><a href="https://jy.tp.yuanmeng.life/"><img src="images/img1.jpg"/></a></li>
		<li><a href="https://jy.tp.yuanmeng.life/"><img src="images/img2.jpg"/></a></li>
		<li><a href="https://jy.tp.yuanmeng.life/"><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();
});