技術標籤：jsjavascript

輪播圖的效果圖

具體的功能：1.自動播放 2.左右焦點切換 3.底下小按鈕切換

以下是實現程式碼：

css樣式：

 * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }
        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border
 
: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        .screen li {
            width: 500px;
            height: 200px;
            overflow
 
: hidden;
            float: left;
        }
        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }
        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
 

            text-align: center;
        }
        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
        .all ol li.current {
            background: yellow;
        }
        #arr {
            display: none;
            z-index: 1000;
        }
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑體';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
        #arr #right {
            right: 5px;
            left: auto;
        }

HTML程式碼：

<div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="images/1.jpg" width="500" height="200" /></li>
                <li><img src="images/2.jpg" width="500" height="200" /></li>
                <li><img src="images/3.jpg" width="500" height="200" /></li>
                <li><img src="images/4.jpg" width="500" height="200" /></li>
                <li><img src="images/5.jpg" width="500" height="200" /></li>
            </ul>
            <ol>
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>

js程式碼：

 //獲取元素
        let screen = document.getElementsByClassName('screen')[0]
        let ul = screen.children[0]
        let lis = ul.getElementsByTagName('li')
        let first_li = lis[0]
        let ol = screen.children[1]
        let img_width = first_li.offsetWidth
        let arr_l = document.getElementById('left')
        let arr_r = document.getElementById('right')
        let box = document.getElementById('box')
        let arr = document.getElementById('arr')
        function animate(el, target) {
       //封裝的動畫效果
      if (el.timerId) {
        clearInterval(el.timerId)
        timerId = null
     }
     el.timerId = setInterval(function () {
         let currrent = el.offsetLeft
         let step = 10
         if (currrent >= target) {
            step = -step
         }
         currrent += step
         el.style.left = currrent + 'px'
         if (Math.abs(currrent - target) < step) {
             el.style.left = target + 'px'
             clearInterval(el.timerId)

                }
           }, 30)
            }
        //動態建立ol下面的li
        for (let i = 0; i < lis.length; i++) {
            let li = document.createElement('li')
            li.innerText = i + 1
            li.setAttribute('index', i)
            ol.appendChild(li)
            if (i == 0) {
                li.className = 'current'
            }
            //給每個li註冊事件
            li.onclick = Liclick
        }
        //封裝li的點選事件
        let ol_li = ol.getElementsByTagName('li')
        function Liclick() {
            // 排他 讓其他所有的li取消高亮
            for (let i = 0; i < ol_li.length; i++) {
                ol_li[i].className = ''
            }
            let li_index = parseInt(this.getAttribute('index'))
            this.className = 'current'
            animate(ul, -li_index * img_width)
        }
        //經過大盒子讓箭頭顯示，離開時箭頭隱藏
        box.onmouseenter = function () {
            arr.style.display = 'block'
        }
        box.onmouseleave = function () {
            arr.style.display = 'none'
        }
        let index = 0;
        arr_r.onclick = function () {
            if (index == lis.length-1) {
                index = 0
                ul.style.left = '0px'
            }
            index++
            if (index < lis.length-1) {
                ol_li[index].click()
            } else {
                animate(ul, -index * img_width)
                for (let i = 0; i < ol_li.length; i++) {
                    ol_li[i].className = ''
                }
            ol_li[0].className = 'current'
        }
        }
        arr_l.onclick=function(){
            if(index==0){
                index=5
                ul.style.left=-index*img_width+'px'
            }
            index--
            ol_li[index].click()
        }
        setInterval (function(){
            arr_r.onclick()
        },5000)
        //克隆第一個li
        let cllone_li = first_li.cloneNode(true)
        ul.appendChild(cllone_li)