“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

JavaScript native JS to write a very simple round cast graph

Learning JavaScript, with native JS to write a very simple round cast graph

The idea is to make the image appear or disappear by making it transparent or opaque

Method of implementation

  1. All the rotation images are superimposed together by absolute positioning
  2. Make all images transparent
  3. Set a class name to appear, and the elements with the class to be opaque, that is, display
  4. Add and remove the name of appear class by JavaScript, so as to control the appearance and disappearance of pictures
  5. The method of transparency change of small dots is the same as above
  6. Add transition attributes to image elements to lengthen the change time to achieve the effect of fading in and out

Achieved effect

  • Images fade in and out
  • Left and right rotation, circular rotation, dot click to switch to the corresponding picture
  • Automatic rotation, can control the rotation of time interval
  • When the mouse mouse leaves the picture, auto rotation starts
  • When the mouse moves over the picture, the auto rotation pauses

Complete code

File structure

The complete code is as follows

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { margin: 0; padding: 0; } ul { list-style: none; } #slideshow { width: 100vw; height: 95vh; overflow: hidden; position: relative; margin: 0 auto; } #imglist li { width: 100%; height: 100%; position: absolute; /* Set opacity */ opacity: 0; The transition: opacity 3.5 s; } #imglist>li img { width: 100%; height: 100%; } #dotlist { position: absolute; bottom: 30px; width: 100px; display: flex; justify-content: space-between; left: 50%; transform: translate(-50%); } #dotlist>li { width: 16px; height: 16px; border-radius: 50%; background-color: #fff; /* All opacity dots are set to semi-transparent */ opacity: 0.3; cursor: pointer; user-select: none; #imglist>li.appear, #dotlist>li.appear {opacity: 1; */ #pre, #next {position: absolute; font-size: 100px; color: rgba(0, 0, 0, .3); top: 50%; transform: translate(0, -50%); font-weight: bold; cursor: pointer; user-select: none; } #pre { left: 20px; } #next { right: 20px; } #pre:hover, #next:hover { color: rgba(255, 255, 255, .3); } < / style > < / head > < body > < div id = "slideshow" > < ul id = "imglist" > < li > < img SRC = "images/Penn. JPG" > < / li > < li > < img SRC = "images/peony. JPG" > < / li > < li > < img SRC = "images/wave of feng shui door. JPG" > < / li > < li > < img SRC = "images/flag wood kakashi. JPG" > < / li > < li > < img SRC = "images/jiraiya. JPG" > < / li > < / ul > < ul id = "dotlist" > < li > < / li > < li > < / li > < li > < / li > < li > < / li > < li > < / li > < / ul > < div id="pre">&lt; </div> <div id="next">&gt; </div> </div> <script> var slideShow = document.getelementById (" slideShow "); var imgList = document.getElementById("imglist"); var imgs = imgList.children; var dotList = document.getElementById("dotlist"); var dots = dotlist.children; var pre = document.getElementById("pre"); var next = document.getElementById("next"); var duration = 3000; Var Index = 0; var count = imglist.children.length; Var timer; // Set a timer window.onload = function () {imglist.children [0].classlist.add ("appear"); Dotlist.children [0].classlist.add ("appear"); // Add a click handler for each dot (var I = 0; i < dots.length; i++) { dots[i].index = i; dots[i].onclick = changeMe; } timer = setInterval(rotate, duration); // Stop animation slideshow. onmouseOver = function (event) {clearInterval(timer); }; Onmouseout = function (event) {timer = setInterval(rotate, duration); }; Pre.onclick = preImg; next.onclick = nextImg; } function change() {for (var I = 0;} function change() {for (var I = 0; i < dots.length; i++) { dots[i].classList.remove("appear"); imgs[i].classList.remove("appear"); } dots[Index].classList.add("appear"); imgs[Index].classList.add("appear"); Function rotate() {Index++; if (Index == count) { Index = 0; } change(); } function preImg() {Index--; if (Index < 0) { Index = count - 1; } change(); } function nextImg() {Index++; if (Index == count) { Index = 0; } change(); Function changeMe() {Index = this.index;} function changeMe() {Index = this.index; change(); } </script> </body> </html>Copy the code