javascript-----轮播图插件

Posted SunLike阿理旺旺

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript-----轮播图插件相关的知识，希望对你有一定的参考价值。

一、效果

 

 

1、html代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="slide" id=\'slide\'>
        <div class="left-btn btn" id="left-btn">&lt</div>
        <div class="slide-nav">
            <div class="slide-container" id=\'slide-container\' style="left:0;"></div>
            <div class="slide-mask" id=\'slide-mask\'></div>
        </div>
        <div class="right-btn btn" id="right-btn">&gt</div>
    </div>
    <script type="text/javascript" src=\'js.js\'></script>
    <!--  <script type="text/javascript" src = \'js/test/test.js\'></script> -->
</body>
</html>

　　2、js代码：

var imgObj = {
    "imgList": [
        { "name": "name1", "url": "imgs/1.jpg", "detail": "fewfewfwfewf1", "link": "http://www.hao123.com" },
        { "name": "name2", "url": "imgs/2.jpg", "detail": "fewfewfwfewf2", "link": "http://www.baidu.com" },
        { "name": "name3", "url": "imgs/3.jpg", "detail": "fewfewfwfewf3", "link": "http://www.w3cschool.com" },
        { "name": "name4", "url": "imgs/4.jpg", "detail": "fewfewfwfewf4", "link": "http://www.taobao.com" }
    ]
}
var parent = document.getElementById("slide");


slideImg(parent, imgObj);


function slideImg(parent, imgObj) {
    var leftBtn = document.getElementById("left-btn");
    var rightBtn = document.getElementById(\'right-btn\');
    var container = document.getElementById("slide-container");
    var mask = document.getElementById("slide-mask");
    var circles = document.getElementsByClassName("img-list-btn");

    var nowIndex = 1;

    //填充图片
    var len = imgObj.imgList.length;
    for (let i = 0; i < len; i++) {
        let imgListBoj = "<div class=\'img\'>" +
            "<a href=\'" + imgObj.imgList[i].link + "\'>" +
            "<img src=\'" + imgObj.imgList[i].url + "\'>" +
            "</a>" +
            "</div>";
        container.innerHTML += imgListBoj;
    }
    //填充圆点
    for (var i = 0; i < len; i++) {
        var list;
        if (i == 0) {

            list = "<span class=\'img-list-btn choose\' id = \'img-list-btn\' data-index=\'" + (i + 1) + "\'></span>";
        } else {
            list = "<span class=\'img-list-btn\' id = \'img-list-btn\' data-index=\'" + (i + 1) + "\'></span>";
        }
        mask.innerHTML += list;
    }

    //左键
    leftBtn.addEventListener("click", function() {
        var left = container.getAttribute("left");

        if (left == null) {
            left = 0;
            container.setAttribute("left", "0");
        }

        if (nowIndex >= 1 && nowIndex < len) {
            left = parseInt(left) - 800;

            if (nowIndex != len) {
                nowIndex++;

                for (var j = 0; j < len; j++) {
                    /* console.log(circles[j]);*/
                    var className = circles[j].getAttribute("class");
                    className = className.replace("choose", "");
                    circles[j].setAttribute("class", className);
                }

                var circle = document.querySelector(".slide-mask span:nth-child(" + nowIndex + ")");
                circle.classList.add("choose");
            }
        }

        container.setAttribute("left", left);
        var s = "transform:translateX(" + (parseInt(left)) + "px);";
        container.setAttribute("style", s);
    })

    //右键
    rightBtn.addEventListener("click", function() {
        var left = container.getAttribute("left");

        if (left == null) {
            left = 0;
            container.setAttribute("left", "0");
        }


        if (nowIndex > 1 && nowIndex <= len) {
            left = parseInt(left) + 800;
            if (nowIndex != 1) {
                nowIndex--;
            }
            for (var j = 0; j < len; j++) {
                var className = circles[j].getAttribute("class");
                className = className.replace("choose", "");
                circles[j].setAttribute("class", className);
            }

            var circle = document.querySelector(".slide-mask span:nth-child(" + nowIndex + ")");
            circle.classList.add("choose");

        }
        container.setAttribute("left", left);
        var s = "transform:translateX(" + (parseInt(left)) + "px);";
        container.setAttribute("style", s);
    })


    //圆点点击事件
    mask.addEventListener("click", function(ev) {
        var ev = ev;
        var target = ev.target;
        var index = target.getAttribute("data-index");

        var s = "transform:translateX(" + (parseInt(index) * -800 + 800) + "px);";
        container.setAttribute("style", s);
        nowIndex = index;
        container.setAttribute("left", (parseInt(index) * -800 + 800));
        for (var j = 0; j < len; j++) {
            var className = circles[j].getAttribute("class");
            className = className.replace("choose", "");
            circles[j].setAttribute("class", className);
        }
        var circle = document.querySelector(".slide-mask span:nth-child(" + nowIndex + ")");
        circle.classList.add("choose");
    })

    setInterval(function() {
        var t = parseInt(Math.random() * 2);
        if (t == 0) {
            rightBtn.click();
        } else {
            leftBtn.click();
        }
    }, 3000);
}

　　3、css代码：

.slide{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 800px;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
}

.slide-nav{
    width: 800px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
}

.slide-nav .slide-container {
    height: 400px;
    white-space: nowrap;
    font-size: 0;
    transition: linear 0.4s all;
}

.slide-nav .slide-container .img{
    width: 800px;
    height: 400px;
    display: inline-block;
    overflow: hidden;
}

.slide-nav .slide-container .img img {
    width: 800px;
}
.slide-mask {
    position: absolute;
    bottom: -40px;
    left: 0;
    z-index: 100;
    width: 800px;
    height: 40px;
    text-align: center;
}

.slide:hover .slide-mask {
    transform: translateY(-40px);
    transition: linear 0.3s all;
}

.slide-mask span{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 10px 10px 0 0;
    border-radius: 10px;
    background-color: #BD2D30;
    cursor: pointer;
}

.slide-mask .choose{
    background-color: white;
}

.left-btn {
    position: absolute;
    z-index: 120;
    width: 60px;
    height: 400px;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    float: left;
    transform: translateX(-100%);
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    background: linear-gradient(left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
}

.right-btn {
    position: absolute;
    z-index: 120;
    width: 60px;
    height: 400px;
    transform: translateX(100%);
    background: -moz-linear-gradient(right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    background: linear-gradient(right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
    top: 0;
    right: 0;
}

.btn {
    line-height: 400px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.slide:hover .left-btn {
    transform: translateX(0);
    transition: linear 0.4s all;
}

.slide:hover .right-btn {
    transform: translateX(0);
    transition: linear 0.4s all;
}

　　

 

以上是关于javascript-----轮播图插件的主要内容，如果未能解决你的问题，请参考以下文章

web前端设计必备网页特效案例 - 轮播图

浅谈轮播图（原生JavaScript实现）

简单的轮播图小插件

JavaScript响应式轮播图插件–Flickity

Javascript知识汇总------手写jq轮播图插件（2018-04-23 17:16）

前端必备技能——轮播图（原生代码+插件）