JavaScript Carousel Figure

demand:
Mouse moves subscript p also converted to the corresponding image;
Multiple images can automatically rotate;
When moving the mouse to the picture, stop automatically rotate;
You can manually adjust the left and right;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JS轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer{
            position: relative;
            top: 20px;
            cursor: pointer;
        }
        .outer .img-box .img-item {
            display: none;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .active{
            display: block !important;
        }
        .outer ul{
            position: absolute;
            top: 250px;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }
        .outer ul li.page-number{
            list-style-type: none;
            display: inline-block;
            color: black;
            margin: 0 6px;
            font-size: 12px;
            width: 20px;
            height: 20px;
            background-color: #05dfff;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
        }
        .page-active{
            background-color: #0000FF !important;
        }
        .outer .mover{
            position: absolute;
            top: 110px;
            left : 50% ; 
            height : 60px ; 
            width : 40px ; 
            background-Color : RGBA (255,255,255,0.65) ; 
            Line-height : 60px ; 
            text-align = left : Center ; 
            font-size : 26px ; 
            the display : none ; 
            User-SELECT : none ;   / * when the user clicks the selected content can not be * / 
        } 
        .outer .leftMover{
            margin-left: -260px;
        }
        .outer .rightMover{
            margin-left: 220px;
        }
    </style>
</head>
<body>
    <div id="outer" class="outer">
        <div class="img-box">
            <img src="../img/1.jpg" class="img-item active">
            <img src="../img/2.jpg" class="img-item">
            <img src="../img/3.jpg" class="img-item">
            <img src="../img/4.jpg" class="img-item">
        </div>
        <ul>
            <li class="page-number page-active">1</li>
            <li class="page-number">2</li>
            <li class="page-number">3</li>
            <li class="page-number">4</li>
        </ul>
        <a id="leftMover" class="mover leftMover">&lt;</a>
        <a id="rightMover" class="mover rightMover">&gt;</a>
    </div>
    <script>
        var objectImgItems = document.getElementsByClassName("img-item");
        var objectRowItems = document.getElementsByClassName("page-number");
        var objectOuter = document.getElementById("outer");
        var objectMover = document.getElementsByClassName("mover");
        var objectLeftMover = document.getElementById("leftMover");
        var objectRightMover =  document.getElementById("rightMover");
        <! - obtain the index value of the node in nodeList -> 
        function getIndex (node, nodeList) {
             for ( var index = 0 ; index < nodeList.length; index ++ ) {
                 IF (nodeList [index] === Node) {
                     return index 
                } 
            } 
        } 
        <-! passed in the page index, page and image conversion -> 
        function Move (numberIndex) {
             for ( var I = 0 ; I <objectImgItems.length; i++){
                if (i === numberIndex) {
                    objectImgItems[i].classList.add("active");
                    objectRowItems[i].classList.add("page-active");
                } else {
                    objectImgItems[i].classList.remove("active");
                    objectRowItems[i].classList.remove("page-active");
                }
            }
        }
        <!--The mouse cover page, page number, and image conversion -> 
        for ( var I = 0 ; I < objectRowItems.length; I ++ ) { 
            objectRowItems [I] .onmouseover =  function () {
                 var numberIndex = getIndex ( the this , objectRowItems ); 
                move (numberIndex); 
                the pageNumber = numberIndex; 
            }; 
        } 
        <-! mouse to move to the whole module, the left and right moving icon display, image stop automatic conversion -> 
        objectOuter.onmouseover =  function () {
            the clearInterval (the intervalId); 
            for ( var I = 0 ; I < objectMover.length; I ++ ) { 
                objectMover [I] .classList.add ( " Active " ); 
            } 
        }; 
        <-! mouse leaves the entire module, move around the hidden icons, images begins automatically converted -> 
        objectOuter.onmouseout =  function () { 
            the intervalId = the setInterval (directionMove, 2000 );
             for ( var I = 0 ; I <objectMover.length; I ++ ) { 
                objectMover [I] .classList.remove ( " Active " ); 
            } 
        }; 
        <-! add page variable, by increment, decrement, to achieve conversion of about -> 
        var the pageNumber =  0 ;
         function directionMove (isLeft) {
             IF (isLeft) {
                 IF (the pageNumber ===  0 ) { 
                    the pageNumber =  . 4 ; 
                } 
                the pageNumber - ; 
            } the else{
                 IF (the pageNumber ===  . 3 ) { 
                    the pageNumber =  - . 1 ; 
                } 
                the pageNumber ++ ; 
            } 
            Move (the pageNumber); 
        } 
        <-! Add timer automatically converted -> 
        var the intervalId = the setInterval (directionMove, 2000 ) ;
         <! - Right conversion -> 
        objectRightMover.onclick =  function () { 
            directionMove (); 
        }; 
        ! <- 左转换 -->
        objectLeftMover.onclick = function () {
            directionMove(true);
        }
    </script>
</body>
</html>
JavaScript Carousel Figure

Guess you like
