<! 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>