原生js实现轮播图

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="js/index.js" ></script>
    </head>

    <body>
        
        <div id="container">
            <div class="indicators">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="list" style="left: -440px">
                <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/7.jpg" alt="1">
                <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/3.jpg" alt="1">
                <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/4.jpg" alt="2">
                <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/5.jpg" alt="3">
                <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/6.jpg" alt="4">
                <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/7.jpg" alt="5">
                <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/3.jpg" alt="5">
            </div>
            <a href="javascript:;" class="arrow arrow_left"></a>
            <a href="javascript:;" class="arrow arrow_right"></a>
        </div>
        <div id="content">
            <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/3.jpg" class="on">
            <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/4.jpg" >
            <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/5.jpg" >
            <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/6.jpg" >
            <img src="http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201907/jiaoben6904/images/7.jpg" >
        </div>
    </body>

</html>

/* css/index.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #00BCD4 no-repeat 0 100px;
    background-size: 1366px 768px;
}

#container {
    position: relative;
    width: 440px;
    height: 220px;
    margin: 50px auto 0 auto;
    overflow: hidden;
    border: 5px solid white;
    border-radius: 5px;
}

a {
    text-decoration: none;
}

.list img {
    float: left;
    width: 440px;
    height: 220px;
}

.list {
    position: absolute;
    width: 3080px;
    height: 220px;
    z-index: 1;
}

.indicators {
    position: absolute;
    left: 110px;
    width: 220px;
    height: auto;
    z-index: 2;
}

.indicators span {
    display: inline-block;
    width: 24px;
    height: 2px;
    margin: 0 5px;
    text-indent: -999px;
    cursor: pointer;
    /*光标呈现为指示链接的指针（一只手）*/
    background-color: white;
    border: 1px solid #fff;
}

.indicators .active {
    border: 0;
    background-color: deepskyblue;
}

.arrow {
    position: absolute;
    top: 35%;
    color: green;
    z-index: 2;
    display: none;
    width: 22.5px;
    height: 33px;
}

.arrow_left {
    left: 10px;
    background-image: url(../img/prev.png);
    background-size: cover;
}

.arrow_right {
    right: 10px;
    background-image: url(../img/next.png);
    background-size: cover;
}

#container:hover .arrow {
    display: block;
}

.arrow:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

#content {
    position: relative;
    margin: 50px auto 0 auto;
    width: 600px;
    height: 110px;
}

#content img {
    width: 110px;
    height: 55px;
    margin-top: 27.5px;
    opacity: 0.6;
    border: 3px solid white;
}

#content img:nth-of-type(1) {
    transform: rotateZ(-30deg);
}

#content img:nth-of-type(2) {
    transform: rotateZ(-15deg);
}

#content img:nth-of-type(3) {
    transform: rotateZ(30deg);
}

#content img:nth-of-type(4) {
    transform: rotateZ(-30deg);
}

#content img:nth-of-type(5) {
    transform: rotateZ(-15deg);
}

#content .on {
    opacity: 1;
}

// js/index.js
window.onload = function() {
    var timer = setInterval(function() {
        next_pic();
    }, 1000);

    function autoPlay() {
        timer = setInterval(function() {
            next_pic();
        }, 1000);
    }
    var index = 0;
    var dots = document.getElementsByTagName("span");
    var imgs = document.getElementById("content").getElementsByTagName("img");

    function showCurrentDot() {
        for(var i = 0, len = dots.length; i < len; i++) {
            dots[i].className = "";
            imgs[i].className = "";
        }
        dots[index].className = "active";
        imgs[index].className = "on";
    }
    var wrap = document.getElementsByClassName("list")[0];
    var next = document.getElementsByClassName("arrow_right")[0];
    var prev = document.getElementsByClassName("arrow_left")[0];
    var container = document.getElementById("container");
    var content = document.getElementById("content");
    content.onmouseenter = function() {
        clearInterval(timer);
    }
    content.onmouseleave = function() {
        autoPlay();
    }
    container.onmouseenter = function() {
        clearInterval(timer);
    }
    container.onmouseleave = function() {
        autoPlay();
    }
    next.onclick = function() {
        next_pic();
        console.log("点击")
    }
    prev.onclick = function() {
        prev_pic();
    }

    function next_pic() {
        var newLeft;
        if(wrap.style.left === "-2640px") {
            newLeft = -880;
        } else {
            newLeft = parseInt(wrap.style.left) - 440;
        }
        wrap.style.left = newLeft + "px";
        index++;
        if(index > 4) {
            index = 0;
        }
        showCurrentDot();
    }

    function prev_pic() {
        var newLeft;
        if(wrap.style.left === "0px") {
            newLeft = -1760;
        } else {
            newLeft = parseInt(wrap.style.left) + 440;
        }
        wrap.style.left = newLeft + "px";
        index--;
        if(index < 0) {
            index = 4;
        }
        showCurrentDot();
    }
    for(var i = 0, len = dots.length; i < len; i++) {
        (function(i) {
            dots[i].onmouseover = function() {
                var dis = index - i;
                if(index == 4 && parseInt(wrap.style.left) !== -2200) {
                    dis = dis - 5;
                }
                //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
                if(index == 0 && parseInt(wrap.style.left) !== -440) {
                    dis = 5 + dis;
                }
                wrap.style.left = (parseInt(wrap.style.left) + dis * 440) + "px";
                index = i;
                showCurrentDot();
            }
            imgs[i].onmouseover =function(){
                var dis = index - i;
                if(index == 4 && parseInt(wrap.style.left) !== -2200) {
                    dis = dis - 5;
                }
                //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
                if(index == 0 && parseInt(wrap.style.left) !== -440) {
                    dis = 5 + dis;
                }
                wrap.style.left = (parseInt(wrap.style.left) + dis * 440) + "px";
                index = i;
                showCurrentDot();
            }
        })(i);
    }
};

posted @ 2019-07-29 22:05 绿谷阅读(133) 评论(0) 收藏举报

刷新页面返回顶部

绿谷

原生js实现轮播图

公告