JQuery实现轮播图 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#tunnre{width: 198px;
height: 200px;
border: 1px solid;
position: relative;
overflow: hidden;}
#tunrre1{
width:600px ;
height: 200px;
position: relative;
}
#tunrre1 img{
width: 200px;
height: 200px;
}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
var i=0;
function huadong(){
i++;
if(i==3){
i=0;
$("#tunrre1").animate({left:"0px"},300);
}
else{
$("#tunrre1").animate({left:"-=200px"},300);
}
}
setInterval(huadong,4000);
})
</script>

</head>
<body>
<div id="tunnre">
<div id="tunrre1">
<img src="img/2017-10-08_15-03-50-001.jpg" /><img src="img/2017-09-23_03-20-49-000.jpg" /><img src="img/2017-10-08_15-03-50-001.jpg" />
</div>
</div>
</body>
</html>
View Code

 

posted on 2017-11-20 16:19  醉月听风  阅读(130)  评论(0)    收藏  举报

导航