当前位置：网站首页>Left and right cases + rotating pictures of small dots + no time

Left and right cases + rotating pictures of small dots + no time

2022-06-12 12:04:00 【Mustang (Mustang)】

effect

Insert picture description here

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* *{
            margin: 0;
            padding: 0;
        } */
        .carousel  /* A large container */
        {
            width: 960px;
            height:320px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .imgCon /* Figure container */
        {
            width: 4800px;
            height: 320px;
            position: absolute;
            left: 0;
            font-size: 0;
            transition: all 2s;/* transition */

        }
        .imgCon img{  /*  Shuffling figure img Size */
            width: 960px;
            height: 320px;
        }
        .dot  /*ul location */
        {
            list-style: none;
            position: absolute;
            bottom: 20px;
            left:380px
        }
        .dot>li{  /*lide  Set up */
            width: 18px;
            height: 18px;
            border-radius: 10px;
            border: 1px solid red;
            background-color: rgba(255,0,0,0);/* background , invisible */
            float: left;  /* float */
            margin-left: 20px;

        }
        .dot>li:nth-child(1){
            background-color: rgba(255,0,0,0.6);
        }
        .leftBn,.rightBn  /* Left and right buttons */
        {
            position: absolute;
            top:140px;
        }
        .leftBn{  /* Left button */
            left:20px;
        }
        .rightBn{ /* Another button */
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <!--  picture , Background image  -->
        <div class="imgCon">
            <img src="./img/a.jpeg">
            <img src="./img/b.jpeg">
            <img src="./img/c.jpeg">
            <img src="./img/d.jpeg">
            <img src="./img/e.jpeg">
        </div>
        <!--  Little dots  -->
        <ul class="dot">  
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--  Left and right buttons  -->
        <img src="img/left.png" class="leftBn">
        <img src="img/right.png" class="rightBn">
    </div>
<script>

   var imgCon,pre,lis;// Define global variables , The purpose is to share 
   var position=0; // Given the initial value , According to the order of pictures 
   // At the beginning, enter the function to perform related operations 
   init();
   function init() {// obtain DOM Elements , Add listening events to the corresponding 
       imgCon=document.querySelector(".imgCon");// Get the wrapped picture div
       lis=document.getElementsByTagName("li");// obtain li   Little dots 
       var leftBn=document.querySelector(".leftBn");  // Get the picture on the left , Button 
       var rightBn=document.querySelector(".rightBn");// Get the picture on the right , Button 
       leftBn.addEventListener("click",clickHandler);  // Add listening events to the left and right buttons , Click event listening 
       rightBn.addEventListener("click",clickHandler);// ditto , Left and right 
// Little dots li   For each li Add click event listening 
       for(var i=0;i<lis.length;i++){  // Circular dot 
           lis[i].addEventListener("click",dotClickHandler); // Add click event listening 
       }
       pre=lis[0];  // Set small circle point initially select the first small circle point 
   }
// Little dots , Click to execute the event 
   function dotClickHandler(e) {  // Little dots li   The event of execution 
       var arr=Array.from(lis);  // First convert to an array 
       position=arr.indexOf(this); // The subscript clicked is the page number 
       imgMove();  // Click to execute the method 
   }
// Picture left and right buttons , Click to execute the method 
   function clickHandler(e) {
       // You can print and have a look this
       console.log(this);// Information of the currently clicked element ,
       if(this.className==="leftBn"){//className Is the attribute to which the current click belongs , The upper line has already been printed , Please check out 
           position--;  //position   Used to indicate the number of pictures . Click the left and right buttons to respond , Subtraction operation 
           if(position<0) position=4;   // If you keep clicking the button on the left , It will be reduced to a negative number , So redefine 
       }else{ // otherwise , That is, what you click is not leftBn, The default here is the right . Of course   You can also write accurately  
           position++;    // The left side is added to the fourth page and reset to 0
           if(position>4) position=0;
       }
       imgMove();// Execute the picture in a certain way 
   }
// How to move pictures 
   function imgMove() {   //
       imgCon.style.left=-position*960+"px";// With img Containers for pictures 
       if(pre){
           pre.style.backgroundColor="rgba(0,0,0,0)";
       }
       pre=lis[position];
       pre.style.backgroundColor="rgba(255,0,0,0.6)";
   }
   //position   The initial setting is 0, Click the picture button （leftBn and rightBn） And small dots will change position
</script>
</body>
</html>