<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<!-- 网页文档三要素 -->
<meta name="Keywords" content="">
<meta name="description" content="">
<title>无缝滚动</title>
<style>
* {
margin: 0;
padding: 0;
}
#banner {
height: 350px;
width: 1120px;
background-color: blue;
overflow: hidden;
margin: 0 auto;
position: relative;/*相对定位，参考物*/
}
#banner ul.img {
width: 8960px;
margin-left: 0px;
}
#banner ul.img li {
height: 350px;
width: 1120px;
list-style: none;
float: left;
}
#banner ul.nav {
position: absolute;
bottom: 10px;/*距离参考物下边的距离*/
width: 140px;
left: 490px;/*距离参考物左端的距离*/
}
#banner ul.nav li {
width: 10px;
height: 10px;
background: #333;
float: left;
margin: 3px;
list-style: none;
}
#banner ul.nav li.curr {
background: #ff0099;
}
</style>
</head>
<body>
<div id="banner"> <!--id名是唯一的-->
<ul class="img">
<li style="background: blue;"></li>
<li style="background: red;"></li>
<li style="background: yellow;"></li>
<li style="background: pink;"></li>
<li style="background: white;"></li>
<li style="background: black;"></li>
<li style="background: green;"></li>
<li style="background: #ccc;"></li>
</ul>
<ul class="nav">
<li class="curr"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
//alert($);
var index = 0;//设置初始序列号；
setInterval(function() {//定时器1秒钟之后再次调用动画
index ++;
if (index > 7) {
index = 0;
}
// index %= 7;
$("#banner ul.nav li").eq(index).addClass("curr").siblings().removeClass();
//让图片从右往左就行滚动轮播
$("#banner ul.img").animate({"margin-left": -1120*index + "px"},-1000);
},1000);
</script>
</body>
</html>
时间： 2024-12-25 16:50:27