淘寶首頁交互4--輪播圖

1.html代碼：

<div class="J_Core">
                    <div class="slide">
                        <ul class="pictures">
                            <li><a href="#" alt="1"><img src="images/我常逛的/slide/1.jpg"></a></li>
                            <li><a href="#" alt="1"><img src="images/我常逛的/slide/2.jpg"></a></li>
                            <li><a href="#" alt="1"><img src="images/我常逛的/slide/3.jpg"></a></li>
                            <li><a href="#" alt="1"><img src="images/我常逛的/slide/4.jpg"></a></li>
                            <li><a href="#" alt="1"><img src="images/我常逛的/slide/5.jpg"></a></li>
                        </ul>
                        <i class="iconfont icon-arrowleft" style="display: none; opacity: 0.3;" ></i>
                        <i class="iconfont icon-arrowright" style="display: none; opacity: 0.3;"></i>
                        <ul class="btn">
                            <li class="active">1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                    </div>
                </div>

2.css代碼：

.slide1 { width: 520px; height: 279px; padding-bottom: 8px;  }

.pictures {  float: left; position: absolute; left: 0; }

3.js代碼：

function slide(){
    
    var Slide = document.getElementsByClassName('slide')[0];
    var oImg = Slide.getElementsByClassName('pictures')[0];
    var arrLi = oImg.getElementsByTagName('li');
    var arr = [];
    var num = 0;
    var iNow = 0;
    var timer = null;
    // 獲取兩個左右兩個按鈕
    var arrowL = Slide.getElementsByClassName('icon-arrowleft')[0];
    var arrowR = Slide.getElementsByClassName('icon-arrowright')[0];
    // 獲取圓點按鈕
    var oBtn = Slide.getElementsByClassName('btn')[0];
    var arrBtn = oBtn.getElementsByTagName('li');

    changeBtnStyle();

    // 鼠標懸停在圖片上時，左右按鈕樣式的變化

    function changeBtnStyle(){
        // 鼠標懸停在圖片上時，左右兩個按鈕顯示出來的
        oImg.onmouseover = function(){
            clearInterval(timer);
            arrowL.style.display = 'block';
            arrowR.style.display = 'block';
            arrowL.style.opacity = '0.3';
            arrowR.style.opacity = '0.3';
        }
        // 鼠標沒有懸停在圖片上時，左右兩個按鈕隱藏
        oImg.onmouseout = function(){
            autoPlay();
            arrowL.style.display = 'none';
            arrowR.style.display = 'none';
        }
        //鼠標懸停在左右的按鈕上時，按鈕的透明度發生變化
        arrowL.onmouseover = function(){
            clearInterval(timer);
            arrowL.style.opacity = '0.8';
            arrowL.style.display = 'block';
            arrowR.style.display = 'block';
        }
        arrowR.onmouseover = function(){
            clearInterval(timer);
            arrowR.style.opacity = '0.8';
            arrowL.style.display = 'block';
            arrowR.style.display = 'block';
        }
        arrowL.onmouseout = function(){
            autoPlay();
            arrowL.style.display = 'none';
            arrowR.style.display = 'none';
        }
        arrowR.onmouseout = function(){
            autoPlay();
            arrowL.style.display = 'none';
            arrowR.style.display = 'none';
        }

        oBtn.onmouseover = function(){
            clearInterval(timer);
            arrowL.style.display = 'block';
            arrowR.style.display = 'block';
            arrowL.style.opacity = '0.3';
            arrowR.style.opacity = '0.3';
        }
    }

    seamless_switching();

    // 左右無縫切換Left_right_seamless_switching
    function seamless_switching(){
        // 當按下左、右按鈕時
        oImg.innerHTML += oImg.innerHTML;//複製兩個盒子中的內容，內容加倍
        oImg.style.width = arrLi.length*arrLi[0].offsetWidth + 'px';//oImg如今的寬度等於裏面圖片的寬度*圖片的個數
        arrowL.onclick = function(){
            num --;
            if(num < 0){    //用於改變圓點按鈕的className值
                num = 4;
            }
            // ----------
            if(iNow == 0){
                iNow = arrLi.length/2;
                oImg.style.left = -oImg.offsetWidth/2 + 'px';
            }
            move(oImg,-iNow*arrLi[0].offsetWidth,-(iNow-1)*arrLi[0].offsetWidth);
            iNow --;
            // ----------
            for(var i=0; i<arrBtn.length; i++){
                arrBtn[i].className = '';
            }
            arrBtn[num].className = 'active';
            

        };
        arrowR.onclick = function(){    
            num ++;
            if(num > 4){    //用於改變圓點按鈕的className值
                num =0;
            }
            // ----------
            if(iNow == arrLi.length/2){
                iNow = 0;
                oImg.style.left = 0;
            }
            move(oImg,-iNow*arrLi[0].offsetWidth,-(iNow+1)*arrLi[0].offsetWidth);
            iNow ++;
            // ----------
            for(var i=0; i<arrBtn.length; i++){
                arrBtn[i].className = '';
            }
            arrBtn[num].className = 'active';
            
        };
    }
    autoPlay();// 自動播放
    function autoPlay(){
        clearInterval(timer);    
        timer = setInterval(function(){
            num ++;
            if(num > 4){    //用於改變圓點按鈕的className值
                num =0;
            }
            // ----------
            if(iNow == arrLi.length/2){
                iNow = 0;
                oImg.style.left = 0;
            }
            move(oImg,-iNow*arrLi[0].offsetWidth,-(iNow+1)*arrLi[0].offsetWidth);
            iNow ++;
            // ----------
            for(var i=0; i<arrBtn.length; i++){
                arrBtn[i].className = '';
            }
            arrBtn[num].className = 'active';
        },4000);        
    }
    
    dotChange();
    function dotChange(){
        for(var i=0; i<arrBtn.length; i++){
        arrBtn[i].index = i;
        arrBtn[i].onclick = function(){
            if(this.index > num){
                var numBtn = num + 1; // 記錄num-1的值
                num += (this.index-num);
                if(num > 4){    //用於改變圓點按鈕的className值
                    num =0;
                }
                // ----------
                if(iNow == arrLi.length/2){
                    iNow = 0;
                    oImg.style.left = 0;
                }
                move(oImg,-iNow*arrLi[0].offsetWidth,-(iNow+(this.index-numBtn+1))*arrLi[0].offsetWidth);
                iNow += (this.index-numBtn+1);
                // ----------
                for(var i=0; i<arrBtn.length; i++){
                    arrBtn[i].className = '';
                }
                arrBtn[num].className = 'active';
            }
            if(this.index < num){
                var numBtn = num - 1;// 記錄num-1的值
                num -= (numBtn-this.index+1);
                if(num < 0){    //用於改變圓點按鈕的className值
                    num = 4;
                }
                // ----------
                if(iNow == 0){
                    iNow = arrLi.length/2;
                    oImg.style.left = -oImg.offsetWidth/2 + 'px';
                }
                move(oImg,-iNow*arrLi[0].offsetWidth,-(iNow-1-(numBtn-this.index))*arrLi[0].offsetWidth);
                iNow -= (numBtn-this.index+1);
                // ----------
                for(var i=0; i<arrBtn.length; i++){
                    arrBtn[i].className = '';
                }
                arrBtn[num].className = 'active';
            }                
        }    // 點擊圓點按鈕切換圖片 
    }
    }
}

function move(obj,old,now){    // 改變元素left值的運動函數
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){    
            var iSpeed = (now - old)/5;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if(now == old){
                clearInterval(obj.timer);
            }else{
                old += iSpeed;
                obj.style.left = old + 'px';
            }    
        },15);
    }

 

這裏簡單引用一張圖，輔助理解：