效果
css代码
<style>
* {
margin: 0px;
padding: 0px;
}
div {
margin: auto;
width: 1200px;
height: 300px;
overflow: hidden;
}
ul {
width: 6000px;
height: 100%;
}
li {
float: left;
width: 1200px;
height: 300px;
}
</style>
html代码
<
body>
<div>
<ul id="ul">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/1.jpg" /></li>
</ul>
</div>
</body>
jQuery代码
<script>
$(function() {
var flag = 0;
setInterval(function() {
flag++;
if(flag > 4) {
flag = 1;
$('#ul').css({"margin-left":"0"});
}
var num = -flag * 1200
$('#ul').animate({"margin-left": num + "px"}, 600);
}, 1200);
})
</script>