<! DOCTYPE HTML> <HTML> <head> <Meta charset = "UTF-8"> <title> </ title> <-! The latest version of Bootstrap core CSS file -> <Link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" Integrity = "+ PmSTsz BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va-SHA384 / K68vbdEjh4u" the crossOrigin = "Anonymous"> <! - - optional Bootstrap theme file (usually without introducing) -> <Link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme .min.css "integrity =" sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl / Sp "crossorigin =" anonymous "> / Sp "crossorigin =" anonymous "> <! - the latest Bootstrap core JavaScript files -> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .slider{ width: 500px; height: 332px; overflow: hidden; position: relative; } .slider .slides{ height: 332px; width: 2500px; } .slider .slide{ float: left; width: 500px; height: 332px; } .Slider. Slide IMG { width: 500px; height: 332px; } #navDiv A { width: 15px; height: 15px; background - Color: Red; margin: 0 5px; a float : left; Opacity: 0.5; / * set transparent * / } #navDiv a.active { background - Color: Black; } #navDiv A: hover { / * set mouse diffusion effects * / background-color: black; } #navDiv{ position: absolute; bottom: 15px; left:200px ; } </style> </head> <body> <div class="container"> <div class="header"> <h1 class="text-muted"> jQuery Basic Slide </h1> </div> <div class="slider"> <ul class="slides"> <li class="slide"><img src="img/1.jpg"/></li> <li class="slide"><img src="img/2.jpg"/></li> <li class="slide"><img src="img/3.jpg"/></li> <li class="slide"><img src="img/4.jpg"/></li> <li class="slide"><img src="img/1.jpg"/></li> </ul> <div id="navDiv"> <a href="javascript:;" class="active"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </div> </body> <script type="text/javascript" src="js/jquery-3.4.1.min.js"> </ Script> <script type="text/javascript"> $ (Document) .ready ( function () { // 1.var dynamic properties var width = 500 ; var Speed = 1000 ; var PAUSE = 2000; // much time for a FIG var interval The; // Get the corresponding element var $ = $ Slider (. "Slider" ); var $ slideContainer = $ slider.find ( "slides."); // same = $ ( ". slides") with the find () only show more clearly var $ = $ slideContainer Slide .find ( "Slide." ); var $ navDiv = $ ( "# navDiv A" ); var index = 0; Var A = 0 ; // 2.setInterval sets a timer function Start () { interval The = the setInterval ( function () { // 2.1 .slides animation pair of left $ slideContainer.animate ({ "margin-left ": " - = "+} width, Speed, function () { // Analyzing the image to last index ++ ; IF (index == $-slide.length. 1 ) { index = 0 ; $ slideContainer.css ( " margin-left ", 0 ); } }); // 2.2 navigation buttons to change the color of $ navDiv.removeClass ( "Active" ); var Alla document.getElementsByTagName = ( "A" ); Alla [A] .style.backgroundColor = "" ; A ++ ; IF (A == allA.length) { A = 0 ; } Alla [A] .style.backgroundColor = "Black" ; }, PAUSE); } Start (); // 3. disposed into the mouse stops, and move out of slider.on $ ({ // ON () to write a plurality of functions, with the bind () MouseEnter: function () { the clearInterval (interval The); interval The = null ; }, MouseLeave: function () { Start (); } }) ; // 4. set the navigation buttons @ 4.1 click switch image $ navDiv.click ( function () { // Alert ($ (the this) .index ()); var Timer = $ ( the this ) .index (); / /Get a subscript of an array value $ slideContainer.animate ({ "margin-left" :-( Timer * width)}, Speed); index = Timer; // after resetting the count value of the subscript, so that a corresponding click still a = Timer; // 4.2 click change color // clear style var Alla document.getElementsByTagName = ( "A" ); Alla [A] .style.backgroundColor = "" ; $ navDiv.removeClass ( "Active" ); // add style $ ( the this ) .addClass ( "Active" ); }); }) </script> </ HTML>