<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 500px;
height: 500px;
margin: 100px auto;
list-style: none;
overflow: hidden;
}
ul>li{
width: 100%;
position: relative;
}
ul>li>img{
float: left;
width: 100%;
position: absolute;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
<ul>
<li><img src="img/a.png" alt=""></li>
<li><img src="img/b.png" alt=""></li>
<li><img src="img/c.png" alt=""></li>
<li><img src="img/d.png" alt=""></li>
</ul>
<script>
$(function () {
let lun = function () {
let oImg = $("img");
let oWidth = $("ul").width();
let sLen = oImg.length;
let index = 0;
let next = 0;
oImg.css("left",oWidth);
oImg.eq(0).css("left",0);
function Show() {
next ++;
if (next ===sLen){
next = 0;
}
oImg.eq(next).css("left",oWidth);
oImg.eq(index).animate({"left":-oWidth});
oImg.eq(next).animate({"left":0});
index = next;
}
setInterval(Show,2000);
};
lun();
});
</script>
</body>
</html>
4429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
