实现效果：图片往左依次出现，轮播完后图片往右依次退到上一张，如此循环往复。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<style>
.one {
width: 5000px;
font-size: 0;
/*font-size: 0;清除图片间的空隙*/
position: relative;
}
.two{
width: 570px;
height:273px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="two">
<div class="one">
<img src="../img/1.jpg">
<img src="../img/2.jpg">
<img src="../img/3.jpg">
<img src="../img/4.jpg">
</div>
<script>
var timer;//计时器
var i=0;//图片索引
var width=570;
is =false;
$(function () {
show();
})
function show() {
timer = setInterval(function () {
showTime();
if(!is){
i++;
}else {
i--;
}
},2000)
}//计时器函数
function showTime() {
$(".one").animate({left:-i*width+"px"},700,function () {
if(i==3){
is=true;
}//i=3时，is=true执行i--
if(i==0){
is=false;
}//i=0时，is=false执行i++
});
}//移动函数
</script>
</body>
</html>
转载于:https://www.cnblogs.com/iriliguo/p/6370215.html
1250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
