原生javascript写的无缝滚动轮播图

html代码

      <div id="box">          <ul>             <li><img src="imgs/1.jpg" /></li>             <li><img src="imgs/2.jpg" /></li>             <li><img src="imgs/3.jpg" /></li>             <li><img src="imgs/4.jpg" /></li>          </ul>          <div id="btn">             <p class="prev"><</p>             <p class="next">></p>          </div>      </div>

css代码

    <style type="text/css">        * {            padding: 0;            margin: 0;            list-style: none;        }        #box {            width: 600px;            height: 200px;            border: 1px solid firebrick;            margin: 100px auto;            overflow: hidden;            position: relative;        }        #box ul {            position: absolute;            left: 0;            top: 0;        }        #box ul li {            float: left;            width: 300px;            height: 200px;        }        #box ul li img {            width: 300px;            height: 200px;        }        #btn .prev,        #btn .next {            width: 25px;            height: 40px;            background: #000000;            color: white;            opacity: 0.5;            font-size: 25px;            line-height: 40px;            cursor: pointer;            bottom: calc(50% - 20px);            position: absolute;            text-align: center;        }        #btn .next {            right: 0;        }        #btn .prev {            left: 0;        }    </style>

js代码

    <script type="text/javascript">        window.onload = function() {            var oBox = document.getElementById('box');            var oUl = document.getElementsByTagName('ul')[0];            var oLi = oUl.getElementsByTagName('li');            var oBtn = document.getElementById('btn');            var oP = oBtn.getElementsByTagName('p');            //console.log(oP)            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;            oUl.style.width = oLi[0].offsetWidth * oLi.length + 'px';                                                                     //设置速度            var speed = 2;            //设置按钮初始化            var num = null;            function move() {                 if (oUl.offsetLeft < -oUl.offsetWidth * 0.5) {                     oUl.style.left = '0';                 }                 if (oUl.offsetLeft > 0) {                     oUl.style.left = -oUl.offsetWidth * 0.5 + "px";                 }                 oUl.style.left = oUl.offsetLeft - speed + 'px';            }            //添加定时器            var timer = setInterval(move, 30);            //划上去停止定时器            oBox.onmouseover = function() {                clearInterval(timer);            };            //划出运行定时器            oBox.onmouseout = function() {                timer = setInterval(move, 30);            };            //遍历按钮            for (var i = 0; i < oP.length; i++) {                                   oP[i].index = i;                oP[i].onclick = function() {                    num = this.index;                    if (num) {    //如果按钮是0，则向左运行                        speed = 2;                    }else{        //如果按钮是1，则向右运行                        speed = -2;                                             }                                           }            }        }    </script>

效果图
—

---