Source code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>JQuery Rotation chart</title> <style> *{ padding:0; margin:0; } .container{ width:600px; height:400px; overflow: hidden; position:relative; margin:0 auto; } .list{ width:3000px; height:400px; position:absolute; } .list>img{ float:left; width:600px; height:400px; } .pointer{ position:absolute; width:100px; bottom:20px; left:250px; } .pointer>span{ cursor:pointer; display:inline-block; width:10px; height:10px; background: #7b7d80; border-radius:50%; border:1px solid #fff; } .pointer .on{ background: #28a4c9; } .arrow{ position:absolute; text-decoration:none; width:40px; height:40px; background: #727d8f; color:#fff; font-weight: bold; line-height:40px; text-align:center; top:180px; display:none; } .arrow:hover{ background: #0f0f0f; } .left{ left:0; } .right{ right:0; } .container:hover .arrow{ display:block; } </style> </head> <body> <div class="container"> <div class="list" style="left:0px;"> <!--<img src="../static/image/photo1.jpg" alt="5"/>--> <img src="../static/image/banner.jpg" alt="1"/> <img src="../static/image/slide1.jpg" alt="2"/> <img src="../static/image/slide1.jpg" alt="3"/> <img src="../static/image/slide1.jpg" alt="4"/> <img src="../static/image/photo1.jpg" alt="5"/> <!--<img src="../static/image/banner.jpg" alt="1"/>--> </div> <div class="pointer"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="#" class="arrow left">></a> <a href="#" class="arrow right"><</a> </div> <script src="../static/js/jquery-3.2.1.min.js"></script> <script> var imgCount = 5; var index = 1; var intervalId; var buttonSpan = $('.pointer')[0].children;//htmlCollection aggregate //Timer for auto carousel function autoNextPage(); function autoNextPage(){ intervalId = setInterval(function(){ nextPage(true); },3000); } //Stop rotation when mouse moves in $('.container').mouseover(function(){ console.log('hah'); clearInterval(intervalId); }); // When the mouse moves out, start the rotation $('.container').mouseout(function(){ autoNextPage(); }); //Click the function on the next page and the previous page $('.left').click(function(){ nextPage(true); }); $('.right').click(function(){ nextPage(false); }); //Corresponding function event delegation of small circle point clickButtons(); function clickButtons(){ var length = buttonSpan.length; for(var i=0;i<length;i++){ buttonSpan[i].onclick = function(){ $(buttonSpan[index-1]).removeClass('on'); if($(this).attr('index')==1){ index = 5; }else{ index = $(this).attr('index')-1; } nextPage(true); }; } } function nextPage(next){ var targetLeft = 0; //Remove the current dot on style $(buttonSpan[index-1]).removeClass('on'); if(next){//turn back and proceed if(index == 5){//Go to the last one, go straight to the first one targetLeft = 0; index = 1; }else{ index++; targetLeft = -600*(index-1); } }else{//Go straight ahead if(index == 1){//In the first, go straight to the fifth index = 5; targetLeft = -600*(imgCount-1); }else{ index--; targetLeft = -600*(index-1); } } $('.list').animate({left:targetLeft+'px'}); //Updated dot plus style $(buttonSpan[index-1]).addClass('on'); } </script> </body> </html>
Design sketch:
Principle:
Page structure:
- Set the carousel container to relative positioning, and the width to the width of the picture; the container is divided into four parts: the carousel picture; the small button clicked; the previous one; the next one
Style:
- The container of the rotation chart is relative positioning, the width / height is set as the width / height of the picture, and the overflow is set as hidden;
- Each part of the container is set to an absolute position and placed in the corresponding position;
- The container width of the rotation picture is set to the sum of the width of all pictures, and the left is set to 0 first;
- The width of each picture is the same, it is set to float on the left, and the left and right pictures are arranged in a row, so the essence of the rotation chart is the movement of the container containing the pictures, and the distance of each movement is the width of one picture, so only one picture is displayed each time;
- The previous one / the next one is set to display as none. When the mouse moves into the main container, the display is set to block
Function:
- Automatic rotation is a timing cycle mechanism, setinterval. When the mouse moves in, the cycle stops and the removal cycle continues;