Note css + body portion disposed img parent
<style>
* {
margin: 0 ;
padding: 0 ;
}
UL {Li
List - style: none;
}
#box {
height: 260px;
width: 500px;
margin: Auto 50px;
position: relative;
overflow: hidden;
}
/ * here the parent img width not provided xian * /
/ * the following picture according to the number of * /
#box div {
position: Absolute;
Top: 0 ;
left: 0;
}
#box div img {
width: 500px;
height: 260px;
float: left;
}
.but .right {
height: 50px;
width: 50px;
position: absolute;
left: 450px;
top: 105px;
}
.but .left {
height: 50px;
width: 50px;
position: absolute;
top: 105px;
left: 0;
}
.dian {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
}
.dian li {
float: left;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: #E84A7E;
margin: 0 5px;
}
.dian .act {
background-color: papayawhip;
}
</style>
<body>
<div id="box">
<div id="box1">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/1.jpg" />
</div>
<div class="but">
<button class="right">>>></button>
<button class="left"><<<</button>
</div>
<ul class="dian">
</ul>
</div>
</body>
js part
<Script the src = "jquery.js"> </ Script>
<Script> // . 1 element selected var $ Box = $ ( "# box1" )
var $ $ box.find IMG = ( "IMG" )
var $ right = $ (. "right" )
var $ $ left = (. "left" )
var $ Dian = $ ( "Dian." )
// 2 the number of images acquired var NUM = $ img.length;
// . 3 to img setting the number of parent width * width 1
$ box.width (img.length $ * $ img.width ())
the console.log ($ img.width ()) // $ Box [0] through .style.width, = $ img.length * $ img.width () + "px"//
console.log ($ box.width ())
// set the picture starting index
var index = 0 // 4 Click the right button is // because let's immediate parent img rolling // if not the final with the first then // when the movie came to the last time a click when it should be the first, // but this will be the first time from the right, so // at the end to add a img // change of index value. 1
$ right.on ( "the Click", function () {
IF (NUM index === -. 1 ) {
// . 5 does not add to the last with the first 0 // index = 0
index. 1 = // 6 when it came to the last time, and then click or come out from the right // so forcibly took the box back to the position box1 beginning
Box $ [0] = 0 + .style.left "PX"
} the else {
index ++
}
// the console.log (index)
$ box.stop (). Animate ({
// . 7 each click down the length of the current this picture of a picture * width
left: -index * $ img.width ()
})
// 10 the class attribute set to the index of the current picture, the picture went to him who, a few small dots of color on
$ dian.find ( "Li"). EQ (index) .addClass ( "ACT" ) .siblings (). removeClass ()
})
$ left.on ( "the Click", function () {
IF (index === 0 ) {
/ /Click the left button, and set the index went box1 position after the last
index = $ img.length - 2
$ Box [ 0] = .style.left - ($ img.length) * $ img.width () + " PX "
// the console.log ($ Box [0] .style.left)
} the else {
index -
}
// the console.log (index)
. box.stop $ () Animate ({
left: -index * $ IMG .width ()
})
// 10 the class attribute set to the index of the current picture, the picture went to him who, a few small dots of color on
$ dian.find ( "li"). eq (index) .addClass ( " ACT " ) .siblings (). removeClass ()
})
var STR =" "
// 8 Loop through num, ul was added to Li
for ( var I = 0; I <NUM; I ++ ) {
STR + = `<Li> </ Li>`
}
$ dian.html (STR)
// . 9 and to first class property plus
$ dian.find ( "li"). EQ (0) .addClass ( "ACT" )
// 11 starts a timer, perform the click event
// equivalent to at regular intervals to click on the a left and right button
// Note that the method used in the click
var time;
time = the setInterval ( function () {
$ right.click ()
}, 3000 )
// 12 is hover method
// mouse to stop the automatic rotation
// mouse out of the opening
box.hover $ ( function () {
the clearInterval (Time)
}, function () {
Time = the setInterval ( function () {
$ right.click ()
}, 3000 )
})
// 13 is difficult to understand step click required can change mouseenter
// mouse click is who gets the current index value to save it on and set to actindex index
$ dian.find ( "li"). oN ( "the click", function () {
var actindex = $ ( the this ) .index ()
index = actindex
// and let the current click open
. $ box.stop () Animate ({
left: -index * $ img.width ()
})
// click on the little bit of property plus
$ dian.find ( "li") eq (index) .addClass (. "ACT" ) .siblings (). removeClass ()
})
</ Script>