<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery轮播图</title>
<script src="./jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">//兼容各种浏览器
$(function(){
var ul = $("#mark");
var li = $("#mark .card");
var scroll = $(".scroll");
var prev = $(".prev");
var next = $(".next");
//启动无缝轮播
wufenglunbo(ul,li,scroll,prev,next);
//封装无缝轮播
function wufenglunbo(ul,li,scroll,prev,next){
var w=li.width()-0+10;
var l=0;
var timer=null;
var len=li.length*2;
ul.append(ul.html()).css({'width':len*w,'left':-len/2*w});
timer=setInterval(init,1000);
function init(){
next.trigger('click');
}
scroll.hover(function(){
clearInterval(timer);
},function(){
timer=setInterval(init,1000);
});
prev.click(function(){
l=parseInt(ul.css("left"))+w; //这里要转成整数，因为后面带了px单位
showCurrent(l);
});
next.click(function(){
l=parseInt(ul.css("left"))-w; //这里要转成整数，因为后面带了px单位
showCurrent(l);
});
function showCurrent(l){
if(ul.is(':animated')){
return;
}
ul.animate({"left":l},300,function(){
if(l==0){
ul.css('left',(-len/2)*w);
}else if(l==(1+(len/2))*-w){
ul.css('left',-w);
}
});
}
}
//js over</script>
<style type="text/css">.scroll{margin:0; width:630px; height:210px; position:relative; overflow:hidden;}
.scroll #mark{list-style-type:none; padding:0; margin:0; position:absolute; top:0;left:0; width:99999px; height:210px; }
.scroll .card{float:left; width:200px; height:210px; background: pink; margin-left:10px;}
.prev{position:absolute; left:-2px; top:84px; }
.next{position:absolute; right:-2px; top:84px;}</style>
</head>
<body>
<div style="width:1000px;margin:50px auto;">
<div class="scroll">
<ul id="mark">
<li class="card">1</li>
<li class="card">2</li>
<li class="card">3</li>
<li class="card">4</li>
</ul>
<a href="javascript:;" class="prev"><img src="./arrow-prev.png" border="0"></a>
<a href="javascript:;" class="next"><img src="./arrow-next.png" border="0"></a>
</div></div>
</body></html>
