jquery 带按钮的图片无缝滚动
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery无缝滚动</title>
<style type="text/css">
*{ padding:0; margin:0;}
body {padding:0;margin:0;}
.slide li{position: relative; float: left; width: 230px; height: 350px;line-height: 350px;text-align: center;list-style: none }
.slide li.item_1{background: blue}
.slide li.item_2{background: #ccc}
.slide li.item_3{background: yellow}
.slide li.item_4{background: #ccc}
.slide ul{ position: relative;width: 900px;height: 35px;}
.slide{position: relative; width: 230px;height: 350px; overflow: hidden;margin: 0 auto;}
.box{position: relative;width: 350px;margin: 0 auto}
.prev,.next{z-index: 1;position: absolute;cursor: pointer;left: 0;width: 20px;height: 20px;text-align: center;; font-size: 20px;font-weight: bold;top: 70px;}
.next{left: 204px}
img{width: 230px;height: 350px;}
.prev:hover,
.next:hover{background: #ccc;}
.btn {position: absolute;right: 0;bottom: 30px}
.btn a{ display: inline-block;width: 20px;height: 20px;;border-radius: 10px;border: 1px solid #000;margin-right: 10px;color: #fff;bottom: 0}
.btn a.on{background: #000}
.btn a span{display: none;}
.slide_2{overflow: hidden;position: relative;width: 100%}
.slide_2 li{height: 500px;background:#ccc url(bg.jpg) center top;width: 1920px;float: left;}
.slide_2 ul{position: relative;}
.slide_2 .btn{}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
(function($){
$.slide = function(options){
var configs = $.extend($.slide.defaults,options);
var $slideBox = $(configs.slideBox), //滚动 的最外层
$box = $slideBox.find("ul"),
$child = $box.children(),
w = $child.width(),
len = $child.length,
curr = 1,
$window = $(window),
timer = null;
var methods = {
init : function(){
var _that = this;
$box.css({width:w*(len+2),left:-w});
this.createrNum();
this.setSlide();
this.btnClick();
if(configs.auto == "true"){
timer = setInterval(function(){
if(curr == len+1){
curr= 1;
}
curr++;
_that.move(curr);
},configs.speed);
this.hoverBox();
};
if(configs.autoScreen == "true"){
this.setCss();
$window.resize(function(){
_that.setCss();
});
};
},
createrNum : function(){ //创建按钮
for(var i = 0 ; i< len;i++){
var $num = $('<a href="javascript:;"><span>'+i+'</span></a>');
$slideBox.find(".btn").append($num);
}
$slideBox.find(".btn a").eq(0).addClass("on");
},
setCss : function(){
if($window.width() < 1920){
$child.css({backgroundPosition:-(1920-$window.width())/2 })
}
},
setSlide : function(){
$child.first().clone().appendTo($box);
$child.last().clone().prependTo($box);
},
btnClick : function(){
var _that = this;
$slideBox.find(".btn a").bind("click",function(){
var index = $(this).index()+1;
curr = index;
_that.move(index)
});
},
move : function(curr){
if(curr < len+1 ){
$box.animate({left:-(curr)*w});
$slideBox.find(".btn a").eq(curr-1).addClass("on").siblings().removeClass("on");
}else{
$slideBox.find(".btn a").eq(0).addClass("on").siblings().removeClass("on");
$box.animate({left:-(curr)*w},function(){
$box.css({left:-w});
});
};
},
hoverBox : function(){
var _that = this;
$slideBox.hover(
function(){
clearInterval(timer);
},function(){
timer = setInterval(function(){
if(curr == len+1){
curr= 1;
}
curr++;
_that.move(curr);
},configs.speed);
});
}
};
return methods.init() && this;
};
$.slide.defaults = {
slideBox : ".slide",
auto : "true",
speed : "2000",
autoScreen : "false"
}
})(jQuery);
$(function(){
$.slide({slideBox:".slide_2",autoScreen:"true"});
$.slide({slideBox:".slide",autoScreen : "false"});
});
</script>
<body>
<div class="banner">
<div class="slide_2">
<ul id="flash-main">
<li class="item_1">1</li>
<li class="item_2">2</li>
<li class="item_3">3</li>
<li class="item_4">4</li>
</ul>
<div class="btn"></div>
</div>
</div>
<div class="box">
<div class="slide">
<ul id="flash-main">
<li class="item_1">1</li>
<li class="item_2">2</li>
<li class="item_3">3</li>
<li class="item_4">4</li>
</ul>
<div class="btn"></div>
</div>
</div>
</body>
</html>
