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>
 

效果圖
—