如何在HTML前端页面实现滚动导航图(多张)

最新推荐文章于 2024-04-16 09:50:05 发布

7ANGHUAN

最新推荐文章于 2024-04-16 09:50:05 发布

阅读量3.8k

点赞数 3

分类专栏：滚动图轮播文章标签： javascript java

本文链接：https://blog.csdn.net/qq_42300526/article/details/103974901

版权

滚动图同时被 2 个专栏收录

1 篇文章 1 订阅

订阅专栏

轮播

1 篇文章 0 订阅

订阅专栏

如何在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>

7ANGHUAN

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
如何在HTML前端页面实现滚动导航图(多张)

前端页面滚动导航图(多张)效果原理：内部足够宽的div平铺所有图片，外部div限制显示宽度，随时间缩小margin-left的大小，达到从右侧进入的效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</...
复制链接

扫一扫