图片轮播的实现

最新推荐文章于 2022-01-18 01:19:00 发布

麦田里的守望

最新推荐文章于 2022-01-18 01:19:00 发布

阅读量327

点赞数

分类专栏：网页设计文章标签： html5开发工具

本文链接：https://blog.csdn.net/qq_40281230/article/details/78226653

版权

网页设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

说明：在淘宝中会常看到一组图片自动向左或向右移动，或点击箭头出现下一张图片，实现该效果的代码如下所示：

这里写图片描述

    <title></title>
    <style>
        .lb-img{
            border: 1px solid red;
            width: 1280px;
            height: 399px;
            position: relative;
            top: 20px;
            left: 5%;
            overflow: hidden;
        }
        .dian{
            font-size: 80px;
            color: white;
            position: absolute;
            top: 300px;
            left: 40%;
        }
        .dian span{
            width: 40px;
            display: block;
            float: left;
            margin-left: 1px;
        }
        #one{
            color: coral;
        }
        .left,.right{
            position: absolute;
            top: 150px;
            color: white;
            font-size: 50px;
            border: 1px solid white;
        }
        .left{
            left: 50px;
        }
        .right{
            right: 50px;
        }

        .left:hover,.right:hover{
            cursor: pointer;
            color: red;
            border-color: red;
        }
    </style>
    <script>

        var imgs,sps,imgdiv,dian;

        window.onload=function(){
            //获取元素对象
            imgs = document.getElementsByTagName("img");
            sps = document.getElementsByTagName("span");
            imgdiv = document.getElementsByClassName("img")[0];
            dian = document.getElementsByClassName("dian")[0];

            var left = document.getElementsByClassName("left")[0];
            var right = document.getElementsByClassName("right")[0];

            //计时器
            setInterval("rightLB()",2000)

            //左按钮点击事件
            left.onclick = function(){
                leftLB();
            }

            //右按钮点击事件
            right.onclick = function(){
                rightLB();
            }

        }

        //左轮播
        function leftLB(){
            dian.appendChild(sps[0]);
            imgdiv.insertBefore(imgs[imgs.length-1],imgs[0]);
        }

        //右轮播
        function rightLB(){
            imgdiv.appendChild(imgs[0]);
            dian.insertBefore(sps[sps.length-1],sps[0]);
        }

    </script>
</head>
<body>

    <div class="lb-img">
        <div class="img">
            <img src="img/lb_01.jpg" />
            <img src="img/lb_02.jpg" />
            <img src="img/lb_03.jpg" />
            <img src="img/lb_04.jpg" />
        </div>

        <div class="dian">
            <span id="one">·</span>
            <span>·</span>
            <span>·</span>
            <span>·</span>
        </div>

        <div class="left">←</div>
        <div class="right">→</div>

    </div>

</body>

麦田里的守望

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
图片轮播的实现

说明：在淘宝中会常看到一组图片自动向左或向右移动，或点击箭头出现下一张图片，实现该效果的代码如下所示： <title></title> <style> .lb-img{ border: 1px solid red; width: 1280px; height: 399px;
复制链接

扫一扫