轮播图

2018-10-17 本文已影响5人回不去的那些时光

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

image.png

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html carousel</title>
        <!-- 引入css文件 -->
        <link rel="stylesheet" type="text/css" href="index.css"/>
    </head>
    <body>
        <div class="container">
            <!-- 图片列表 -->
            <div id="list" style="left: -800px;">
                <img src="img/5.jpg" alt="5" />
                <img src="img/1.jpg" alt="1" />
                <img src="img/2.jpg" alt="2" />
                <img src="img/3.jpg" alt="3" />
                <img src="img/4.jpg" alt="4" />
                <img src="img/5.jpg" alt="5" />
                <img src="img/1.jpg" alt="1" />
            </div>
            <!-- 圆点列表 -->
            <div id="buttons">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
                <span index="4"></span>
                <span index="5"></span>
            </div>
            <!-- 前一页 -->
            <a href="javascript:;" id="prev" class="arrow">&lt;</a>
            <!-- 后一页 -->
            <a href="javascript:;" id="next" class="arrow">&gt;</a>
        </div>
        
        <!-- 引入js文件 -->
        <script type="text/javascript" src="index.js"></script>
    </body>
</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);
            }
        }
    }
}

轮播图

猜你喜欢

热点阅读