This article shares the specific code for JavaScript to achieve the special effects of the carousel map for your reference. The specific content is as follows <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aaa { width: 600px; height: 350px; position: relative;/*Relative positioning*/ margin: 50px auto;/*50px from the top and centered*/ } .picture img { position: absolute;/*absolute positioning*/ } .dot { position: absolute; bottom: 5px; } .dot li { float: left; width: 16px; height: 16px; background-color: #e8e8e8; border-radius: 50%; list-style: none;/*Clear list style*/ margin-right: 10px; cursor: pointer;/*The cursor is rendered as a pointer (a hand) indicating a link*/ } .left { width: 30px; height: 30px; position: absolute; top: 169px; text-align: center; background-color: #000000; line-height: 30px; color: #FFFFFF; cursor: pointer;/*The cursor is rendered as a pointer (a hand) indicating a link*/ } .right { width: 30px; height: 30px; position: absolute; top: 169px; right: 0; text-align: center; background-color: #000000; line-height: 30px; color: #FFFFFF; cursor: pointer;/*The cursor is rendered as a pointer (a hand) indicating a link*/ } .aaa .spot { background-color: #FF0000; } </style> </head> <body> <div class="aaa"> <div class="picture"> <img src="images/1.jpg" style="width: 600px;height: 350px;"> <img src="images/2.jpg" style="width: 600px;height: 350px;"> <img src="images/3.jpg" style="width: 600px;height: 350px;"> <img src="images/4.jpg" style="width: 600px;height: 350px;"> <img src="images/5.jpg" style="width: 600px;height: 350px;"> </div> <ul class="dot"> <li class="spot"></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="left"><</div><!--< Escape character--> <div class="right">></div><!--> Escape character--> </div> <script> var lis = document.querySelectorAll(".dot li") var picture = document.querySelectorAll(".picture img") var left = document.querySelector(".left") var right = document.querySelector(".right") var aaa = document.querySelector(".aaa") var index = 0 //Set the index number variable picture[index].style.opacity = 1 //The first picture is displayed //Right button changes the picture right.onclick = function() { fn("+") } //Left button to change the imageleft.onclick = function() { fn("-") } //Timer changes the image every 3000 milliseconds var timer = setInterval(function() { fn("+") }, 3000) //Mouse enters pause aaa.onmouseover = function() { clearInterval(timer) } //Mouse out and continue aaa.onmouseout = function() { timer = setInterval(function() { fn("+") }, 3000) } //Change the image when the mouse touches the dot for (var i = 0; i < lis.length; i++) { lis[i].in = i lis[i].onmouseover = function() { fn(this.in) } } //Function function fn(ope) { picture[index].style.opacity = 0 //The previous picture is hidden lis[index].className = "" //Clear small dot style//Judge ope if (typeof ope === 'number') { index = ope } else if (ope === '+') { //Judge whether the right button if (index === 4) { index = 0 } else { index++ } } else { if (index === 0) { //Judge whether the left button index = 4 } else { index-- } } picture[index].style.opacity = 1 //Current picture displaylis[index].className = "spot" //Add style to the spot} </script> </body> </html> The effect is shown in the figure: The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Examples of importing and exporting MySQL table data
>>: MySQL conditional query and or usage and priority example analysis
1. Introduction Elasticsearch is very popular now...
HTML img tag: defines an image to be introduced in...
Preface As Linux operation and maintenance engine...
This note is an installation tutorial. It has no ...
The situation is as follows: (PS: The red box repr...
View system help help contents mysql> help con...
1. Installation 1. Download MySQL Download addres...
In order to enhance the ability to write JavaScri...
So-called talent (left brain and right brain) Tha...
Preface In the development of small programs, we ...
1. Command Introduction The cal (calendar) comman...
Table of contents JSON appears Json structure Jso...
By default, the reading and writing of container ...
Preface Generator functions have been in JavaScri...
When installing Docker on Windows 10, after selec...