前端开发之js基础(7)
程序员文章站
2022-06-30 19:15:16
...
js实现轮播动画
css代码`
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
img{
vertical-align: middle;/*去除图片底部三像素空白*/
}
#box{
width: 490px;
height: 170px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#box ul{
width: 2450px;
position: absolute;
top: 0;
left: 0;
}
#box ul li{
float: left;
}
#square{
width: 200px;
height: 30px;
position: absolute;
bottom: 10px;
left: 30%;
}
#square span{
width: 16px;
height: 16px;
line-height: 16px;
display: inline-block;
background: white;
padding: 5px;
margin-left: 10px;
cursor: pointer;
}
#square span.active{
background: pink;
}
</style>html代码
<body>
<div id="box">
<ul>
<li><a href="#"><img src="../images/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/04.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/05.jpg" alt="" /></a></li>
</ul>
<div id="square">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</body>js代码
<script type="text/javascript">
var box = document.getElementById("box");
var ullist = document.getElementsByTagName("ul")[0];
var square =box.children[1];
var span = box.children[1].children;
//得到ul宽度
var scrolllWidth = box.offsetWidth;
for(var i=0;i<span.length;i++){
span[i].index = i;//获得当前索引号
span[i].onmousemove = function(){
for(var j=0;j<span.length;j++){
span[j].className = "";
}
this.className = "active";
banner(ullist,-this.index*scrolllWidth);
}
}
//封装轮播
function banner(obj,target){
clearInterval(obj.timer);//开启定时器清除以前的定时器
//如果offsetwidth大于target位置,就反方向
var speed = obj.offsetLeft<target? 15:-15;
obj.timer =setInterval(function(){
var result = target-obj.offsetLeft;
obj.style.left = obj.offsetLeft+speed+"px";
if(Math.abs(result)<=15){
obj.style.left = target+"px";
clearInterval(obj.timer);
}
},50);
}
</script>上一篇： 基于TCP协议的网络聊天室
下一篇： 前端开发之js基础(8)