JS实现轮播图 - 爱码网

静态页面：

JS实现轮播图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="slider" class="slider">
    <div id="slider_scroll" class="slider-scroll">
        <div class="slider-main" id="slider_main">
            <div class="slider-main-img">
                <a href="">
                    <img src="images/1.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/2.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/3.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/4.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/5.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/6.jpeg" alt="">
                </a>
            </div>
        </div>
    </div>
    <div class="slider-ctl" id="slider_ctl">
        <span class="slider-ctl-prev"></span>
        <span class="slider-ctl-next"></span>
    </div>
</div>
<script src="js/myFunc.js"></script>
<script src="js/index.js"></script>
</body>
</html>

css布局：

*{
    margin: 0;
    padding: 0;
    border:none;
}

img{
    vertical-align: top;
}

.slider{
    width: 310px;
    height: 260px;

    position: relative;
    margin: 100px auto;
    /*background-color: red;*/
    overflow: hidden;
}

.slider-scroll{
    width: 310px;
    height: 220px;
    position: relative;
    /*background-color: green;*/
}

.slider-main{
    width: 620px;
    height: 220px;
    background-color: purple;
}

.slider-main-img{
    width: 310px;
    height: 220px;
    position: absolute;

}

.slider-main-img img{
    width: 100%;
    height: 100%;
}

.slider-ctl{
    cursor: pointer;
    text-align: center;
}

.slider-ctl-prev, .slider-ctl-next{
    background: url("../images/icon.png");
    width: 20px;
    height: 34px;
    position: absolute;
    top: 50%;
    margin-top: -35px;
}

.slider-ctl-prev{
    left: 5px;
}

.slider-ctl-next{
    background-position: -9px -45px;
    right: 5px;
}

.slider-ctl-icon{
    width: 24px;
    height: 5px;
    background: url("../images/icon.png") no-repeat -24px -790px;
    display: inline-block;
    margin: 5px;

    text-indent: 20em;
}

.current{
    background-position: 0 -770px;
}

JS代码：

window.onload = function () {
    // 1. 获取需要的标签
    var slider = $("slider");
    var slider_main = $("slider_main");
    var slider_main_img = slider_main.children;
    var slider_ctl = slider.children[1];
   // console.log(slider_main.children);//test
    var iNow = 0;

    // 2. 动态创建指示器
    for(var i=0; i<slider_main_img.length; i++){
        var span = document.createElement("span");
        span.className = "slider-ctl-icon";
        span.innerText = slider_main_img.length - i - 1;
        slider_ctl.insertBefore(span, slider_ctl.children[1]);
    }

    // 3. 让第一个选中
    slider_ctl.children[1].className = "slider-ctl-icon current";

    // 4. 让滚动的内容归位
    var scroll_w = slider.offsetWidth;
    for(var j=1; j<slider_main_img.length; j++){//从1开始
        slider_main_img[j].style.left = scroll_w + "px";
    }

    // 5. 遍历监听操作
    var slider_ctl_child = slider_ctl.children;
    for(var i=0; i<slider_ctl_child.length; i++){
        // 5.1 监听点击
        slider_ctl_child[i].onmousedown = function () {
            // 5.2 判断
            if(this.className === "slider-ctl-prev"){ // 左边
                /*
                 1.当前可视区域的图片快速右移;
                 2.上一张图片快速出现在可视区域的左边
                 3.让这张图片做动画进入
                */
                buffer(slider_main_img[iNow], {"left": scroll_w});//当前图片用缓动动画移动
                iNow--;
                // 判断
                if(iNow < 0){
                    iNow = slider_main_img.length - 1;
                }
                slider_main_img[iNow].style.left = -scroll_w + 'px';//上一张图片先快速到左边，准备缓动
                buffer(slider_main_img[iNow], {"left": 0});//缓动到当前可视区域

            }else if(this.className === "slider-ctl-next"){ // 右边
                autoPlay();
            }else { // 下边
                /*
                 1.用当前点击的索引和选中索引对比
                 2.点击的 > 选中的, 相当于点击了右边的按钮
                 2.点击的 < 选中的, 相当于点击了左边的按钮
                */

                // 获取索引
                var index = parseInt(this.innerText);
                // 对比
                if(index > iNow){
                    buffer(slider_main_img[iNow], {"left": -scroll_w});
                    slider_main_img[index].style.left = scroll_w + 'px';
                }else if(index < iNow){
                    buffer(slider_main_img[iNow], {"left": scroll_w});
                    slider_main_img[index].style.left = -scroll_w + 'px';
                }
                iNow = index;
                buffer(slider_main_img[iNow], {"left": 0});

            }

            changeIndex();
        }
    }

    // 6. 切换索引
    function changeIndex() {
        for(var i=1; i<slider_ctl_child.length-1; i++){
            slider_ctl_child[i].className = "slider-ctl-icon";
        }

        slider_ctl_child[iNow+1].className = "slider-ctl-icon current";
    }

    // 7. 自动播放
    var timer = setInterval(autoPlay, 1000);
    function autoPlay() {
        /*
         1.当前可视区域的图片快速左移;
         2.下一张图片快速出现在可视区域的右边
         3.让这张图片做动画进入
         */
        buffer(slider_main_img[iNow], {"left": -scroll_w});
        iNow++;
        // 判断
        if(iNow >= slider_main_img.length){
            iNow = 0;
        }
        slider_main_img[iNow].style.left = scroll_w + 'px';
        buffer(slider_main_img[iNow], {"left": 0});

        changeIndex()
    }

    // 8. 设置和清除定时器
    slider.onmouseover = function () {
        clearInterval(timer);
    };

    slider.onmouseout = function () {
        timer = setInterval(autoPlay, 1000);
    }
};

这里面最关键的就是点击两个箭头的时候的操作，需要详细解释一下，拿点击“上一个”为例：

首先，我们需要实现的效果是，当前这一张图片通过缓动动画右移，上一张图片，从左边出来，缓动到可视区域，让当前的图片缓动右移很容易实现，通过之前封装的buffer函数就可以轻松实现，但是第二个如果直接使用buffer函数可能会有一些问题，因为他要在左边出来的前提就是他得在左边，所以，我们得先通过非动画操作让它快速在左边待命，然后在通过缓动动画去实现动画的演示。

定时器，在鼠标进入后一定要记得清除掉，离开后再开启！

就这里的代码而言，有一个比较绕的地方，也有一个不合理的地方，就是在静态页面的制作上有些不合理，他们的关系是这样的：slider>slider-scroll>slider-main>slider-main-img,我们改变的是slider-main-img的属性，需要注意的是slider-main是没有定位的，所以slider-main-img的位置是按照slider-scroll来的，而且slider-main的宽度已经没有了影响，它的存在是没有价值的。