轮播图

今天我们就来做一个轮播图效果，首先我说一下轮播图的原理，轮播图就是一组图片利用视觉差达到图片切换的效果。
1、我们使用html和css构建一下页面布局，最后效果如下

image.png

html代码

    
        
        
        
        
    
    
        

            
            

                
                
                
                
                
                
                
            
            
            

                
                
                
                
                
            
            
            <
            
            >
        
        
        
        
    

css代码

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}
/* 整体盒子 */
.container {
    width: 800px;
    height: 400px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
/* 图片集合 */
#list {
    width: 5600px;
    height: 400px;
    position: absolute;
    z-index: 1;
}

#list img {
    float: left;
    width: 800px;
    height: 400px;
}
/* 圆点集合 */
#buttons {
    position: absolute;
    bottom: 20px;
    left: 10px;
    width: 100px;
    height: 10px;
    z-index: 2;
}

#buttons span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
    background-color: #333;
    cursor: pointer;
}

#buttons .on {
    background-color: #FF4500;
}

.arrow {
    display: none;
    width: 40px;
    height: 40px;
    line-height: 35px;
    position: absolute;
    top: 180px;
    z-index: 2;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, .3);
    cursor: pointer;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, .7)
}

.container:hover .arrow {
    display: block;
}

#prev {
    left: 10px;
}

#next {
    right: 10px;
}

到这里，页面的布局也已经全部完成了。接下来，我们使用js完成页面切换图片的效果

2、使用js利用图片偏移，达到切换图片的效果
javascript

window.onload = function() {
    var container = document.getElementsByClassName('container')[0];
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var index = 1;
    var animated = false;
    var timer;

    play();
    //  自动播放
    function play() {
        timer = setInterval(function() {
            next.onclick();
        }, 3000);
    }
    //  停止自动播放
    function stop() {
        clearInterval(timer);
    }

    container.onmouseover = stop;
    container.onmouseout = play;

    //  移动
    function animate(offset) {
        animated = true;
        var newLeft = parseInt(list.style.left) + offset;
        var time = 300; //  位移总时间
        var interval = 10; //   位移间隔时间
        var spend = offset / (time / interval); //  每次位移量

        function go() {
            if((spend < 0 && parseInt(list.style.left) > newLeft) || (spend > 0 && parseInt(list.style.left) < newLeft)) {
                list.style.left = parseInt(list.style.left) + spend + 'px';
                setTimeout(go, interval);
            } else {
                animated = false;
                list.style.left = newLeft + 'px';
                if(newLeft > -800) {
                    list.style.left = -4000 + 'px';
                }
                if(newLeft < -4000) {
                    list.style.left = -800 + 'px';
                }
            }
        }
        go();
    }
    //  点击向右的按钮
    next.onclick = function() {
        if(index == 5) {
            index = 1;
        } else {
            index += 1;
        }
        showButton();
        if(!animated) {
            animate(-800);
        }
    }
    // 点击向左的按钮
    prev.onclick = function() {
        if(index == 1) {
            index = 5;
        } else {
            index -= 1;
        }
        showButton();
        if(!animated) {
            animate(800);
        }
    }
    //  显示小圆点
    function showButton() {
        for(var i = 0; i < buttons.length; i++) {
            if(buttons[i].className == 'on') {
                buttons[i].className = '';
                break;
            }
        }
        buttons[index - 1].className = 'on';
    }
    //  点击小圆点时，切换图片
    for(var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function() {
            var myIndex = parseInt(this.getAttribute('index'));
            //                      console.log(myIndex);
            var offset = -800 * (myIndex - index);
            index = myIndex;
            showButton();
            if(!animated) {
                animate(offset);
            }
        }
    }
}