The code don’t understand you can refer to my personal video www.bilibili.com/video/BV1jA…

1. Completed version of JS with arrowhead focus

1.1 HTML part

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Carousel</title> <link rel="stylesheet" href="css/index.css"> <! <script SRC ="js/animate. Js "></script> <! -- the introduction of the index. Js - > < script SRC = "js/index. Js" > < / script > < / head > < body > < div class = "wrap" > <! <ul> <li> <a href="javascript:; ><img src="images/01.jpg"></a> </li> <li> <a href="javascript:;" ><img src="images/02.jpg"></a> </li> <li> <a href="javascript:;" ><img src="images/03.jpg"></a> </li> <li> <a href="javascript:;" ><img src="images/04.jpg"></a> </li> <li> <a href="javascript:;" ><img src="images/05.jpg"></a> </li> </ul> <! <a href="javascript:;" class="left"> &lt; </a> <a href="javascript:;" class="right"> &gt; </a> <! - dot - > < ol id = "list" > < / ol > < / div > < / body > < / HTML >Copy the code

1.2 the CSS part

* { margin: 0px; padding: 0px; list-style: none; } .wrap { position: relative; margin: 50px auto; width: 490px; height: 170px; overflow: hidden; } ul { position: absolute; top: 0; width: 600%; left: 0; } li { width: 490px; height: 170px; float: left; } /* Navigation */. Left,. Right {position: absolute; width: 20px; height: 30px; line-height: 30px; top: 50%; margin-top: -15px; background: rgba(0, 0, 0, .2); text-decoration: none; color: white; display: none; } .left { left: 0; } .right { right: 0; text-align: right; } /* dot */ #list {position: absolute; bottom: 10px; right: 10px; } #list li { float: left; background: #ccc; color: #fff; font-weight: bold; height: 20px; width: 20px; font-size: 15px; margin-right: 1px; line-height: 20px; text-align: center; border-radius: 50%; } #list .on { background: #088bcf; color: red; }Copy the code

1.3 js part

window.addEventListener('load', function() { var left = document.querySelector('.left'); var right = document.querySelector('.right'); var wrap = document.querySelector('.wrap'); wrap.addEventListener('mouseenter', function() { left.style.display = 'block'; right.style.display = 'block'; clearInterval(timer); timer = null; }) wrap.addEventListener('mouseleave', function() { left.style.display = 'none'; right.style.display = 'none'; timer = setInterval(function() { right.click(); }, 2000); Var ul = wrap.querySelector('ul'); var ol = wrap.querySelector('ol'); var wrapWidth = wrap.offsetWidth; for (var i = 0; i < ul.children.length; Var li = document.createElement('li'); var li = document.createElement('li'); // Insert node ol.appendChild(li); // Set the custom li.setAttribute('index', I); Li.addeventlistener ('mouseover', function() {for (var I = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = 'on'; Ul //animate(obj,target,callback) var index = this.getAttribute('index'); num = index; circle = index; // console.log(index); // console.log(wrapWidth); animate(ul, -index * wrapWidth); Children [0]. ClassName = 'on'; Var first = ul.children[0]. CloneNode (true); ul.appendChild(first); Var num = 0; var circle = 0; var flag = true; right.addEventListener('click', function() { if (flag) { flag = false; If (num == ol.children. Length - 1) {ul.style. Left = 0; num = 0; } num++; animate(ul, -num * wrapWidth, function() { flag = true; // open the throttle}); // Click the button to make the circle change accordingly. If (circle == ol.children. Length) {circle = 0; } circleChange(); }}); // left. AddEventListener ('click', function() {if (flag) {flag = false; If (num == 0) {num = ul.children. Length - 1; ul.style.left = -num * wrapWidth + 'px'; } num--; animate(ul, -num * wrapWidth, function() { flag = true; }); // Click the button to make the circle change accordingly. If (circle < 0) {// circle = ol.children. Length - 1; // } circle = circle < 0 ? ol.children.length - 1 : circle; circleChange(); } }) function circleChange() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[circle].className = 'on'; Var timer = setInterval(function() {right.click(); }, 2000); // throttle valve to prevent the rotation too fast (callback function)Copy the code

Js calls the animate function

function animate(obj, target, callback) { // console.log(callback); Callback = function() {} Callback (); Timer = setInterval(function() {var step = math.ceil ((target -) obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); If (obj.offsetLeft == target) {// Stop the animation essentially stops the timer clearInterval(obj.timer); // if (callback) {// // call function // callback(); // } callback && callback(); } // change the step size to a smaller one :(target value - current position) / 10 obj.style.left = obj.offsetleft + step + 'px'; }, 15); }Copy the code

Code 1 to achieve the effect is better, automatic generation of dots, throttle valve, seamless rolling, the code is also more complete

2. Round figure

2.1 HTML part

<div id="wrap"> <! - image - > < ul > < li > < img SRC = "images / 01. JPG" > < / li > < li > < img SRC = "images / 02. JPG" > < / li > < li > < img SRC = "images / 03. JPG" > < / li > <li><img src="images/04.jpg"></li> <li><img src="images/05.jpg"></li> </ul> <! Digital -- -- - > < ol id = "list" type = "a" > < li class = "on" > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < li > 5 < / li > < / ol > <! <a href="#" class="left"> &lt; </a> <a href="#" class="right"> &gt; </a> </div>Copy the code

2.2 the CSS part

* { padding: 0px; margin: 0px; list-style: none; } body { height: 2000px; } /* start*/ #wrap {margin: 100px auto; width: 490px; height: 170px; overflow: hidden; position: relative; } ul li { width: 490px; height: 170px; } end*/ / start*/ #list {position: absolute; bottom: 10px; right: 10px; } #list li { float: left; background-color: #f90; color: #fff; font-weight: bold; font-size: 15px; height: 20px; line-height: 20px; width: 20px; margin-right: 1px; text-align: center; border-radius: 50%; cursor: pointer; } #list .on { background: #088bcf; color: #fff; } /* navigation bar */ a {position: absolute; width: 20px; height: 30px; line-height: 30px; top: 50%; margin-top: -15px; background: rgba(0, 0, 0, .2); text-decoration: none; color: white; display: none; } .left { left: 0; /*border-top-right-radius: 15px; border-bottom-right-radius: 15px; */ } .right { right: 0; text-align: right; /*border-top-left-radius: 15px; border-bottom-left-radius: 15px; */ } #wrap:hover a { display: block; }Copy the code

2.3 js part

var div = document.querySelector('div'), ul = document.querySelector('ul'), list = document.querySelector('#list'), lis = list.querySelectorAll('li'), left = document.querySelector('.left'), right = document.querySelector('.right'), index = 0, timer = null; Function auto() {timer = setInterval(function() {index++; if (index >= lis.length) { index = 0; } change(index) }, 2000) } auto(); Function change(curIndex) {function change(curIndex) { Ul.style. marginTop = -170 * curIndex + "px"; For (var I = 0; var I = 0; i < lis.length; i++) { lis[i].className = ""; } lis[curIndex].className = "on"; // Index = curIndex; } div.onmouseover = function() { ul.style.cursor = "pointer"; // Stop the multicast clearInterval(timer) when the mouse moves to the multicast area; } div. Onmouseout = auto; For (var I = 0; i < lis.length; i++) { lis[i].index = i; lis[i].onmouseover = function() { change(this.index); } } var num = 0; var circle = 0; AddEventListener ('click', function() {if (num == ul.children.length - 1) {ul.style.margintop = 0; num = 0; } ul.style.marginTop = -170 * num + "px"; num++; // click the right button to follow the change circle++; console.log(ul.children.length); if (index == ul.children.length - 1) { circle = 0; } change(circle); }); Function () {if (num == 0) {ul.style.margintop = -170 * num + "px"; num = ul.children.length - 1; } ul.style.marginTop = -170 * num + "px"; num--; // Click the left button to follow the change circle--; // console.log(ul.children.length); if (index == 0) { circle = ul.children.length - 1; } change(circle); })Copy the code

2 round broadcast graph code implementation is more concise, but also the most easy to understand, round broadcast graph function is also basically realized, of course, can also be improved to add later

3. The round figure

3.1 HTML part

<div id="main"> <div id="banner"> <a href="#"> <div class="banner-slide slide1 slide-active"> <img src="images/01.jpg"> </div> </a> <a href="#"> <div class="banner-slide slide2"> <img src="images/02.jpg"> </div> </a> <a href="#"> <div class="banner-slide slide3"> <img src="images/03.jpg"> </div> </a> <a href="#"> <div class="banner-slide slide4"> <img src="images/04.jpg"> </div> </a> <a href="#"> <div class="banner-slide slide5"> <img src="images/05.jpg"> </div> </a> </div> <! Digital -- -- - > < div class = "dots" > < ul id = "dots" > < li class = "li1" > 1 < / li > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < li > 5 < / li > < / ul > </div> <! - button - > < div id = "left - right" > < div class = "move" id = "prev" > & lt; </div> <div class="move" id="next">&gt; </div> </div> </div>Copy the code

3.2 the CSS part

* { margin: 0px; padding: 0px; list-style: none; } #main { margin: 100px auto; width: 750px; height: 315px; overflow: hidden; position: relative; } #banner li { width: 750px; height: 315px; } .banner-slide, img { width: 750px; height: 315px; } /* number */ #dots {position: absolute; bottom: 10px; right: 10px; } #dots li { float: left; background-color: #f90; color: #fff; font-weight: bold; font-size: 15px; height: 20px; line-height: 20px; width: 20px; margin-right: 1px; text-align: center; border-radius: 50%; cursor: pointer; } #dots .li1 { color: red; } /* button */. Move {position: absolute; width: 20px; height: 30px; line-height: 30px; top: 50%; margin-top: -15px; background: rgba(0, 0, 0, .2); text-decoration: none; color: white; display: none; } #next { text-align: right; right: 0; } #main:hover .move { display: block; } .move:hover { color: orange; }Copy the code

3.3 js part

var main = document.querySelector('#main'); var pics = document.querySelector('#banner').querySelectorAll('div'); var dots = document.querySelector('#dots').querySelectorAll('li'); var banner = document.querySelector('#banner'); var prev = document.querySelector('#prev'); var next = document.querySelector('#next'); var len = pics.length; var index = 0; var timer = null; Function solide() {main.onmouseover = function() {if (timer) {clearInterval(timer); }} banner.onmouseout = function() {timer = setInterval(function() {index++; if (index >= len) { index = 0; } changImg(); }, 2000); } banner.onmouseout(); Var j = 0; j < len; j++) { dots[j].index = j; dots[j].onmouseover = function() { index = this.index; changImg(); Prev. Onclick = function() {index--; if (index < 0) { index = len - 1; } changImg(); Next.onclick = function() {index++; if (index >= len) { index = 0; } changImg(); } } solide(); Function changImg() {for (var I = 0; i < len; i++) { pics[i].style.display = 'none'; dots[i].className = ""; } pics[index].style.display = 'block'; dots[index].className = 'li1'; }Copy the code

3 code to achieve rotation by modifying the picture and dot style to achieve picture switching effect is novel. Also have seen pure CSS to achieve image switching above code for reference only, you can also write your own rotation diagram code, let it achieve the effect of better than I have this picture below