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

最新推荐文章于 2023-12-26 20:44:38 发布

置顶九州白

最新推荐文章于 2023-12-26 20:44:38 发布

阅读量434

点赞数 1

分类专栏：前端文章标签： javascript jquery js 轮播图

本文链接：https://blog.csdn.net/qq_38783557/article/details/107167947

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

一、源码
二、思路
三、实战

一、源码

轮播图
可克隆下载在本地测试

二、思路

1.绝对定位

图片设置成绝对定位

2.图片默认位置

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

3.图片显示位置

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

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

设置left:-100%;

三、实战

1.html部分

<!--html部分-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.6">
    <title>轮播图</title>
    
    <!--引入css文件-->
    <link rel="stylesheet" href="css/banner.css">
    
    <!--引入字体文件-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1812798_0r0o8o24ma5i.css">
    
    <!--引入jquery库-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    
</head>

<body>

    <div class="container">
        <ul class="show" id="show">
        <!--这里放图片-->
            <li class="list-item active"><img src="img/banner1.jpeg" alt=""></li>
            <li class="list-item"><img src=" img/banner2.jpeg" alt=""></li>
            <li class="list-item"><img src=" img/banner3.jpeg" alt=""></li>
            <li class="list-item"><img src=" img/banner4.jpeg" alt=""></li>
            <li class="list-item left"><img src="img/banner5.jpeg" alt=""></li>
        </ul>
        
        <!--点击小点跳转到当前图片，这部分不完美-->
        <ul class="switch" id="what">
            <li class="btn active"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
        </ul>
        
        <!--左右按钮-->
        <button class="left"><i class="iconfont icon-zuoyoujiantou"></i></button>
        <button class="right"><i class="iconfont icon-zuoyoujiantou-copy-copy-copy-copy"></i></button>
        
    </div>
    
    <!--main.js代码放在js文件夹里-->
    <script src="js/main.js"></script>
</body>

</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();

})