用简单的JS实现轮播的功能

旧城等待， 2022-03-19 02:53 220阅读 0赞

**用简单的JS实现轮播的功能**

开发工具与关键技术：JavaScript
    作者：陈希雄
    撰写时间：2019/2/14

主要是思路，如果思路不清晰的话，告诉你可能会写得一塌糊涂

HTML代码：
           <div class="conten">
                <div id="lb" style="width:4597px;position:absolute;left:0">
                   <img src="~/Content/壁纸包/1053344.jpg" />
                    <img src="~/Content/壁纸包/1013511.jpg" />
                    <img src="~/Content/壁纸包/1034558.jpg" />
                    <img src="~/Content/壁纸包/1037902.jpg" />
                    <img src="~/Content/壁纸包/1045546.jpg" />
                    <img src="~/Content/壁纸包/1053344.jpg" />
                    <img src="~/Content/壁纸包/1013511.jpg" />           
     </div>
            </div>
    CSS 代码：
    #lb img{
               width:650px;
               height:400px;
           }
            .conten {
                border: 1px solid #ccc;
                width: 650px;
                height: 400px;
                position: relative;
                overflow: hidden;
                margin-left: 22%;
            }
    JS 代码
    dc("lb");
            function dc(id) {
                Dp();
                var left = 0; var s, t = 0;
                var img = document.getElementById("" + id + "");
                var offsetWidth = parseFloat(img.children[0].offsetWidth + 5);//获取当前这个div里面的img的宽
                function Dp() {
                    s = setInterval(function () {
                        if (t <= -offsetWidth * (img.childElementCount - 2)) {//img.childElementCount 获取这个div里面所有子元素的数量 
                            left = 0;
                            t = 0;
                            t -= offsetWidth;
                            Go();
                        } else {
                            t -= offsetWidth;
                            Go();
                        }
                    }, 2000);
                }
                function Go() {
                    if (left <= t) {
                        img.style.left = "" + t + "px";//防止div边缘出现间隙或者空白
                        clearInterval(s);
                        Dp();
                    } else {
                        img.style.left = "" + parseFloat(left -= 20) + "px";
                        setTimeout(Go, 10);//动画的速度
                    }
                }
                //设置鼠标的移入、移出事件来控制图片的播放、停止；
                img.onmouseover = function () {
                    clearInterval(s);
                };
                img.onmouseout = function () {
                    Dp();
                }
            }

效果图：  
![在这里插入图片描述][20190214170655114.gif]

[20190214170655114.gif]: /images/20220319/0980adc65e8c49c7af8896871390234e.png