图片轮播的实现

来源：互联网发布：大鱼海棠影评知乎编辑：程序博客网时间：2024/06/06 00:27

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

这里写图片描述

    <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 0