<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.swipe{
width: 800px;
height: 400px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.container{
width: 4800px;
height: 400px;
position: absolute;
left: 0;
/*transition: all 1s ease-in-out;*/
}
.slide{
float: left;
width: 800px;
height: 100%;
text-align: center;
line-height: 400px;
font-size: 100px;
color: white;
background: cyan;
}
</style>
</head>
<body>
<!--显示区-->
<div class="swipe">
<!--内容区域-->
<div class="container">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">1</div>
</div>
</div>
<script type="text/javascript">
var conDiv=document.getElementsByClassName("container")[0];
var dx=0;
function move(){
dx-=5;
if(dx%800==0){
//每次偏完一整张 暂时清除计数器
clearInterval(timer);
//延迟一定时间后再次开启
setTimeout(function(){
timer=setInterval(move,20);
},2000);
}
if(dx<=-3200){
dx=0;
}
conDiv.style.left=dx+"px"
// if(index<=-5){
// index=0;
// }
}
var timer=setInterval(move,20);
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.swipe{
width: 800px;
height: 400px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.container{
width: 4800px;
height: 400px;
position: absolute;
left: 0;
/*transition: all 1s ease-in-out;*/
}
.slide{
float: left;
width: 800px;
height: 100%;
text-align: center;
line-height: 400px;
font-size: 100px;
color: white;
background: cyan;
}
</style>
</head>
<body>
<!--显示区-->
<div class="swipe">
<!--内容区域-->
<div class="container">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">1</div>
</div>
</div>
<script type="text/javascript">
var conDiv=document.getElementsByClassName("container")[0];
var dx=0;
function move(){
dx-=5;
if(dx%800==0){
//每次偏完一整张 暂时清除计数器
clearInterval(timer);
//延迟一定时间后再次开启
setTimeout(function(){
timer=setInterval(move,20);
},2000);
}
if(dx<=-3200){
dx=0;
}
conDiv.style.left=dx+"px"
// if(index<=-5){
// index=0;
// }
}
var timer=setInterval(move,20);
</script>
</body>
</html>