<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<title>slider</title>
</head>
<style>
div,ul,li,body,img{
padding: 0;
margin: 0;
list-style: none;
}
ul{
/* width: 100%; */
height: 200px;
width: 1500px;
overflow: hidden;
}
ul li{
float: left;
height: 100%;
width: 500px;
/* width: 33.3%; */
margin-right: -4px;
}
.eq1{
/* transform: translateX(100px); */
}
ul li img{
width: 100%;
height: 100%;
}
/* .move{
transform: translate3d(-500px, 0, 0);
transition: transform 0.5s;
} */
</style>
<body>
<div class="content">
<div class="slider">
<ul>
<li id='eq1' class='item'><img src="../1.jpg" alt=""></li>
<li id='eq2' class='item'><img src="../2.jpg" alt=""></li>
<li id='eq3' class='item'><img src="../3.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
<script src='../node_modules/zepto/dist/zepto.js'></script>
<script>
var i=0;
setInterval(moveSlider,2000);
function moveSlider(){
i++;
alert(i)
if(i>=3){
i=0;
// setInterval(moveSlider,2000);
}
else{
$("ul").css('transform', 'translate3d(-' + i*500 + 'px,0,0)');
}
}
</script>
</html>
网友评论