无缝轮播

来源：互联网发布：sql是系统软件编辑：程序博客网时间：2024/05/16 12:06

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#cut{
position: relative;
width: 500px;height: 400px;background:red; margin: 50px auto;
overflow: hidden;

}
#box{
position: absolute;
width: 10000px;height: 400px;background: cornflowerblue;
}
.smallbox{
width: 500px;height: 400px;float: left;
}
.copy:nth-of-type(1){
width: 500px;height: 400px;float: left;background: yellow;
}
.copy2{
width: 500px;height: 400px;float: left;background:red;
}
#left{
position: absolute;
top: 50%;left: 0;
transform: translate(0%,-50%);
width: 50px;height: 100px;background: black;
}
#right{
position: absolute;
top: 50%;right: 0;
transform: translate(0%,-50%);
width: 50px;height: 100px;background: black;
}
ul{
position: absolute;
top: 90%;left: 50%;
transform: translate(-50%,-90%);
width: 100px;height: 20px;background: green;
}
ul li{
float: left;width: 15px;height: 15px;background: black;
margin:5px 5px 0 0;list-style: none;
text-align: center;line-height: 15px;color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="cut">
<div id="box">
<div class="copy"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="copy2"></div>
</div>
<button id="left"></button>
<button id='right'></button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
console.log($('.smallbox').length);
var cOlor =["red","blue","yellow"];
$('#box').css({"left":-500});
var sum=500;
for(var i=0;i<$('.smallbox').length;i++){
// $('.smallbox').eq(i).css("background-color",cOlor[i]);
$('.smallbox').eq(i).css({"background-color":cOlor[i]});
}
var num=0;
$('#right').on('click',function(){
clear();
num++;
if(num>2){
num=0;
$('#box').css({"left":0});
}
$('#box').stop().animate({"left":(num*-500)-sum},1000);
aotuplay();
})
$('#left').on('click',function(){
clear();
num--;
if(num<0){
num=2;
$('#box').css({"left":-2000});
}
$('#box').stop().animate({"left":(num*-500)-sum},1000);
aotuplay();
})
$('li').on('click',function(){
console.log(1);
clear();
var index =$(this).index();
$('#box').stop().animate({"left":(index*-500)-sum},1000);
num=index;
aotuplay();
})

function aotuplay(){
timer =setInterval(function(){
num++;
if(num>2){
num=0;
$('#box').css({"left":0});
}
$('#box').animate({"left":(num*-500)-sum},1000);
},2000)

}
aotuplay();
function clear(){
clearInterval(timer);
}
</script>
</html>

0 0