Today, I wrote the rotation map. The main thing is to train my hands and lay a good foundation for future large projects. At the time of writing, css spent a lot of effort on me. Many of the attributes I had learnt before were forgotten, and many of them were found out. Then when the js part started to write, there was almost no clue. After reading the first bit of code written by others, there was basically a general idea. The process and operation are completed by oneself. It is a work of independent intellectual property rights. Ha ha ha ha ha ha ha!
I put all three parts of the code here, hoping to see how many pointers the big man can make.
This is the html section
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body> <div class="main"> <ul> <li> <img src="img\1.jpg" alt=""> <img src="img\2.jpg" alt=""> <img src="img\3.jpg" alt=""> <img src="img\4.jpg" alt=""> </li> </ul> <div class="iconlist"> <span></span> <span></span> <span></span> <span></span> </div> <a href="javascript:" id='left' class="arrow"><</a> <a href="javascript:" id='right' class="arrow">></a> </div> <script src="base.js"></script> </body> </html>
This is the css section
* { margin: 0; padding: 0; } a { text-decoration: none; } .main { margin: 100px auto; width: 800px; height: 500px; background-color: red; overflow: hidden; position: relative; } .main:hover .arrow { display: block; } .main img { width: 100%; height: 500px; float: left; } .iconlist { width: 80px; height: 30px; display: flex; justify-content: space-around; position: absolute; bottom: 0; left: 50%; transform: translate(-50%); } .iconlist span { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #aaa; margin-top: 7px; } .arrow { position: absolute; display: block; width: 50px; height: 100px; background-color: rgba(0, 0, 0, 0.6); font-size: 50px; line-height: 100px; top: 250px; transform: translateY(-50%); color: #fff; display: none; } #right { right: 0; }
This is the js section
let imgs = document.getElementsByTagName('img'); let iconlist = document.getElementsByClassName('iconlist')[0]; let icons = iconlist.getElementsByTagName('span'); let main = document.getElementsByClassName('main')[0]; let arrows = document.getElementsByClassName('arrow'); //timer let m = 0; let timer; function setTime() { timer = setInterval(run, 3000); } //run function setTime(); function run() { control(m); m++; if (m >= imgs.length) { m = 0; } } function control(n) { for (let i = 0; i < imgs.length; i++) { imgs[i].style.display = 'none'; } imgs[n].style.display = 'block'; } //Control small icon to switch pictures function mouseimg() { iconlist.addEventListener('mouseover', function(e) { //Event delegation var e = e || window.event; var tar = e.target || e.srcElement; console.log(tar) for (var i = 0; i < icons.length; i++) { icons[i].style.backgroundColor = ''; if (tar == icons[i]) { icons[i].style.backgroundColor = 'red'; for (let i = 0; i < imgs.length; i++) { imgs[i].style.display = 'none'; } imgs[i].style.display = 'block'; m = i; //There will be an error if the value of m is not saved here. The value of m is needed below to switch pictures again } } }, true); } mouseimg(); //Clear and restart the timer section function stop() { clearInterval(timer); } main.addEventListener('mouseover', stop, false); function start() { setTime(); } main.addEventListener('mouseout', start, false); //Realize left-right switching picture function Dragimg() { arrows[0].addEventListener('click', function() { m--; if (m <= 0) { m = 3; } control(m); }) arrows[1].addEventListener('click', function() { m++; if (m >= 3) { m = 0; } control(m); }) } Dragimg();