淘宝首页交互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);
    }

 

这里简单引用一张图，辅助理解：