多张)"/>
如何在HTML前端页面实现滚动导航图(多张)
如何在HTML前端页面实现滚动导航图(多张)
效果：
原理：
内部足够宽的div平铺所有图片，外部div限制显示宽度，随时间缩小margin-left的大小，达到从右侧进入的效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div > a{padding: 10px;}</style>
</head>
<body onload="start()"><!--外部限制图片显示-->
<div style="display: inline-block; height: 123px;width: 1000px; overflow: hidden; "><!--内部图片平铺--><div id="img" style=" margin-left: 0px; width: 1800px;" ><a><img src="../images/list.png"></a><a><img src="../images/list1.png"></a><a><img src="../images/list2.png"></a><a><img src="../images/list3.png"></a><a><img src="../images/list.png"></a><a><img src="../images/list1.png"></a><a><img src="../images/list2.png"></a><a><img src="../images/list3.png"></a></div>
</div>
</body>
<script>var i = 0;function move(){/*每次移动的像素*/i -= 1;document.getElementById("img").style.marginLeft= i+"px";/*移至指定位置重置滚动图*/if ( i == -550){document.getElementById("img").style.marginLeft= "0px";i = 0;}}function start(){/*设置每次移动的时间间隔*/setInterval("move()",20);}
</script>
</html>
更多推荐
如何在HTML前端页面实现滚动导航图(多张)
发布评论