JavaScript首屏轮播

最新推荐文章于 2022-01-09 18:38:15 发布

H-哈哈哈哈

最新推荐文章于 2022-01-09 18:38:15 发布

阅读量451

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Hocen_Jonin/article/details/73739350

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin: 0; padding: 0}
        a{ text-decoration: none;}
        .aox{ width: 1080px; height: 432px; margin: 100px auto; position: relative; overflow: hidden;}
        .Box{ width: 5400px; height: 432px; position: absolute; z-index: 1;}
        .Box img{ width: 1080px; height: 432px; float: left;}
        .but{ position: absolute; right: 200px; bottom: 30px; z-index: 2;}
        .but span{ width: 20px; height: 20px; background-color: #1F84FF; color: white; display: inline-block; border-radius: 50%; text-align: center; line-height: 20px;}
        .but span.on{ background-color: #2dbe60;}
        .arrow{ position: absolute; top: 200px; font-size: 50px; z-index: 2; color: #1F84FF; display: none;}
        .aox:hover .arrow{ display: block; background-color: rgba(0,0,0,0.5)}
        .arrow_left{ left: 10px;}
        .arrow_right{ right: 10px;}
    </style>

</head>
<body>
    <div class="aox">
        <div class="Box" style=" left: -1080px">
            <img src="img/3.png">
            <img src="img/1.jpg">
            <img src="img/2.jpg">
            <img src="img/3.png">
            <img src="img/1.jpg">
        </div>
        <div class="but">
            <span class="on">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <a href="javascript:;" class="arrow arrow_left"><</a>
        <a href="javascript:;" class="arrow arrow_right">></a>
    </div>
    <script>
        var Obox = document.querySelector(".Box");
        var prev = document.querySelector(".arrow_left");
        var next = document.querySelector(".arrow_right");
        next.onclick = function () {
            next_pic();
        }
        prev.onclick = function () {
            prev_pic();
        }

        function next_pic () {
            index++;
            if(index>2){
                index = 0;
            }
            showCurrentDot();

            var newLeft;
            if(Obox.style.left === '-4320px'){
                newLeft = -2160;
            }else{
                newLeft = parseInt(Obox.style.left) - 1080;
            }
            Obox.style.left = newLeft + 'px';
        }
        function prev_pic () {
            index--;
            if(index<0){
                index = 2;
            }
            showCurrentDot();

            var newright;
            if(Obox.style.left === '0px'){
                newright = -2160;
            }else{
                newright = parseInt(Obox.style.left) + 1080;
            }
            Obox.style.left = newright + 'px';
        }

        var NextTime = null;
        function AutoPlay() {
            NextTime = setInterval(function () {
                next_pic();
            },2000)

        }
        AutoPlay();

        var StopAox = document.querySelector(".aox");
        StopAox.onmouseenter = function(){
            clearInterval(NextTime);
        }
        StopAox.onmouseleave = function(){
            AutoPlay();
        }

        var index = 0;
        var But = document.querySelector(".but");
        var Round = But.getElementsByTagName("span");
//        alert(Round.length)
        function showCurrentDot() {
            for(var i = 0, len = Round.length; i<len; i++){
                Round[i].className = "";
            }
            Round[index].className = "on";
        }

        for(var i = 0, len = Round.length; i<len; i++){
            (function(i){
                Round[i].onclick = function(){
                    var ClickCite = index - i;
                    if(index == 2 && parseInt(Obox.style.left) !== -3240){
                        ClickCite = ClickCite - 3;
                    }
                    if(index == 0 && parseInt(Obox.style.left) !== -1080){
                        ClickCite = 3 + ClickCite;
                    }
                    Obox.style.left = (parseInt(Obox.style.left) + ClickCite * 1080) + "px";
                    index = i;
                    showCurrentDot();
                }
            })(i);
        }
    </script>
</body>
</html>