如何制作无缝轮播图------非完美版

一、思路

1.绝对定位

图片设置成绝对定位

2.图片默认位置

图片默认放在left:100%;处

3.图片显示位置

显示的图片放在left:0;处

4.图片从显示位置向左移

设置left:-100%;

二、实战

1.html部分

2.css部分

/* css部分 */

body,
ul,
li,
img,
button {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    height: 100%;
    width: 100%;
    max-width: 1000px;
}

ul {
    list-style: none;
}

.container {
    position: relative;
    top: 40px;
    left: 40px;
    width: 604px;
    height: 298px;
    overflow: hidden;

}

.container .show {
    height: 298px;
    width: 100%;
    position: relative;
}

/* 默认位置的图片优先级最低 */
.container .show li {
    width: 604px;
    height: 298px;
    position: absolute;
    left: 100%;
    transition: 0.4s;
    z-index: -1;
}

/* 图片显示优先级最高 */
.container .show li.active {
    left: 0;
    z-index: 10;

}

/* 左移的图片优先级其次 */
.container .show li.left {
    left: -100%;
    z-index:2;
}

.container .show li img {
    width: 100%;
    height: 100%;
}

/* 圆点的z-index设置成最高 */
.container .switch {
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 115px;
    height: 20px;
    margin-left: -57.5px;
    border-radius: 2em;
    cursor: pointer;
    z-index: 10;
}

container .switch li.btn {
    float: left;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    margin: 4px 5px;
    
    /* 现将边界设成透明的，hover时再改变颜色 */
    border: 2px solid transparent;
    transition: 0.4s;
    box-sizing: border-box;

}


.container .switch li.active {
    background: #00a1d6;
    transition: 0.2s;
}

.container .switch li:hover {
    border: 2px solid #fff;
    background-color: #00a1d6;
    transform: scale(1.3);
    box-sizing: border-box;
}

/* 按钮的z-index设置成最高 */.
.container button {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    transform: scale(2);
    z-index: 10;
    background: none;
    color: white;
    outline: none;

}

button.left {
    position: absolute;
    top: 50%;
    left: 0;
}

button.right {
    position: absolute;
    top: 50%;
    right: 0;
}

.test {
    margin-top: 60px;
}

注意：
需要给图片设置z-index值，当前显示设置成最大，左移后的设置成第二大的，默认的设置成最小的。。。不然会出bug

3.js部分

// js部分，用jquery方便一些
//注意：需加上$(function(){})

$(function () {
    curIndex = 0;
    before = curIndex;
    let timer = "";
    let showArea = $(".show");
    let point = $(".switch");
    let listList = showArea.children();
    let pointList = point.children();

    //清除之前的active属性
    function clearActive() {
        listList.removeClass("active left");
        pointList.removeClass("active");
    }

    // goIndex默认向右
    function goIndex(current, previous) {
        clearActive();

        listList.eq(current).addClass("active").css({
            tranform:"0.4s"
        });
        
        // 给上一个添加标记
        listList.eq(previous).addClass("left");
        pointList.eq(current).addClass("active");
    }

    // 写一个向左走的函数
    function goLeft(current) {
        clearActive();
        listList.eq(current).addClass("active");
        listList.eq(current - 1).addClass("left");
        pointList.eq(current).addClass("active");

    }
    
    //向右走
    function next() {
        curIndex >= 4 ? curIndex = 0 : curIndex++;
        goIndex(curIndex, curIndex - 1);

    }

    //向左走
    function prev() {
        curIndex <= 0 ? curIndex = 4 : curIndex--;
        goLeft(curIndex);

    }

    // 按钮点击事件
    $(".left").click(function () {
        prev();

    });
    $(".right").click(function () {
        next();
    });

    // 圆点点击事件，给当前元素绑定一个委托事件
    pointList.click(function () {
        before = curIndex;
      
        // 获取当前元素索引
        curIndex = $(this).index();
        // console.log(curIndex);
        
        if (before == curIndex) {
            return;
        } else if (before > curIndex) {
           
            // 左移
            goLeft(curIndex);
        } else {
         
            // 右移
            goIndex(curIndex, before);
        }


    });

    function start() {
    
        //每次开始之前清空计时器
        timer = "";
        timer = setInterval(function () {
            next();
        }, 2000);
    }
    start();

    function stop() {
        clearInterval(timer);
    }
  
    // 鼠标放上时出现按钮
    $('.container').hover(function () {
        stop();
        $("button").show().fadeIn(400);

    }, function () {
        start();
        $("button").hide().fadeOut(400);

    });
  
    // 默认隐藏
    $("button").hide();

})

4.图示

右移示例

图片默认位置

图片展示位置

previous

左移示例

图片默认位置

图片展示位置

previous

注意：这里图片显示的左移、右移与实际移动方向相反

三、展示

展示链接：轮播图

不足之处：点击图片下边的圆点时会出现bug，虽然也能显示图片，但是过渡效果不太好