点击左右滚动的jquery插件

html部分

<div class="main6">
<div class="anli2_left LeftArr"><img src="images/left.png" alt="" id="anli2_left"></div>
<div class="anli2_left RightArr" style="left:830px;"><img src="images/right.png" alt="" id="anli2_right"></div>
  <div class="anli2">
    <div style="height:90px"></div>    
    <div class="anli2_center">
      <ul>
        <div class="anli2_center_div"><img src="images/1.jpg">
          <div class="anli2_center_div_tit">点击左右滚动的jquery插件</div>
        </div>
        <div class="anli2_center_div"><img src="images/2.jpg">
          <div class="anli2_center_div_tit">点击左右滚动的jquery插件</div>
        </div>
        <div class="anli2_center_div"><img src="images/3.jpg">
          <div class="anli2_center_div_tit">点击左右滚动的jquery插件</div>
        </div>
        <div class="anli2_center_div"><img src="images/4.jpg">
          <div class="anli2_center_div_tit">点击左右滚动的jquery插件</div>
        </div>
        <div class="anli2_center_div"><img src="images/5.jpg">
          <div class="anli2_center_div_tit">点击左右滚动的jquery插件</div>
        </div>
        <div class="anli2_center_div"><img src="images/6.jpg">
          <div class="anli2_center_div_tit">点击左右滚动的jquery插件</div>
        </div>
        <div class="anli2_center_div"><img src="images/7.jpg">
          <div class="anli2_center_div_tit">点击左右滚动的jquery插件</div>
        </div>
        <div class="anli2_center_div"><img src="images/8.jpg">
          <div class="anli2_center_div_tit">济点击左右滚动的jquery插件</div>
        </div>
        <div class="anli2_center_div"><img src="images/9.jpg">
          <div class="anli2_center_div_tit">点击左右滚动的jquery插件</div>
        </div>
      </ul>
    </div>      
  </div>
</div>

CSS部分

.main6{width: 1002px;height: 656px;margin: 0px auto;overflow:hidden;background: url(../images/pic13.jpg) 0 0 no-repeat;position: relative;}
.anli2{width: 902px;overflow: hidden;margin: 0px auto;}
.anli2 h6{text-align:right;}
.anli2 h6 a{color:#e56817;}
.anli2_txt{height:120px;overflow:hidden;}
.anli2_left{width: 68px;height: 68px;position:absolute;left:100px;top:300px;z-index:4;}
.anli2_center{width: 902px;height: 554px;overflow: hidden;position: relative;}
.anli2_center_div{width:902px;height:554px;position:relative;float:left;}
.anli2_center_div img{width: 902px;height: 554px;}
.anli2_center_div_tit{font-size:14px;width:902px;line-height:30px;padding-left:22px;height:60px;position:absolute;bottom:0px;color:#fff;background:#000;/* Fallback for web browsers that doesn't support RGBa */ background: rgb(0, 0, 0);/* RGBa with 0.6 opacity */ background: rgba(0, 0, 0, 0.6);}
.anli2_center ul{width: 2000px;position: relative;height: 554px;overflow: hidden;}

js部分

<script>
		(function(){
		  var $conterdiv = $("div.anli2_center ul .anli2_center_div").length;
		  var $addcont = $("div.anli2_center ul").html();
			  if($conterdiv==1){
				$("div.anli2_center ul").append($addcont);
			   }
			$.fn.extend({
				 gundong:function(options){
					 var defaults = {
						 LeftArr:"LeftArr",//左边点击按钮
						 RightArr:"RightArr",//右边点击按钮
						 CenterArr:"CenterArr",//中间滚动
						 autoPlay:true,//是否自动滚动
						 autoPlayTime:1,//每次滚动的间隔时间
						 speed:500,//滚动速度
						 frameWidth:902,//中间DIV的宽度
						 pageWidth:902 //每次滚动的宽度
					  }
					  var options = $.extend(defaults,options);
					  var LeftGo = function(){
						   $(options.CenterArr).stop().animate({left:-options.pageWidth},options.speed,function(){
								$(options.CenterArr).children().last().after($(options.CenterArr).children().first());
								$(options.CenterArr).css({left:"0"});
							});
						}
					  var RightGo = function(){
						   $(options.CenterArr).children().first().before($(options.CenterArr).children().last());
								$(options.CenterArr).css({left:-options.pageWidth});
								$(options.CenterArr).stop().animate({left:"0"},options.speed,function(){					
								$(options.CenterArr).css({left:"0"});
							});
						  }
					  return this.each(function(){
						  $(options.LeftArr).click(function(){
							    LeftGo(); 
						   });
						   $(options.RightArr).click(function(){
							    RightGo();
						   });
						   var a = setInterval(function(){LeftGo()},1000*options.autoPlayTime);
						    options.LeftArr.add(options.RightArr).hover(function(){
								clearTimeout(a);
							},function(){
								a = setInterval(function(){LeftGo()},1000*options.autoPlayTime);
							});							
					  });
				 }
			});	
		})(jQuery);
        $(function(){
			$(".LeftArr").gundong({
				LeftArr:$(".LeftArr"),//左边点击按钮
				RightArr:$(".RightArr"),//右边点击按钮
				CenterArr:$(".anli2_center ul"),//中间滚动
				pageWidth:902, //每次滚动的宽度
				speed:500,//滚动速度
				autoPlayTime:3,//每次滚动的间隔时间
			});
		});
        </script>

转载于:https://my.oschina.net/tongjh/blog/182342