左右にスクロールするjqueryプラグインをクリック
5634 ワード
htmlセクション
CSS部
js部分
<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>