<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>轮播图</title>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.outer{
margin:70px auto;
width: 430px;
height: 430px;
position: relative;
}
.img li{
position:absolute;
top:0;
left:0;
}
{.num
position: Absolute; / * out of the digital display * /
bottom: 20px;
text-align = left: Center;
width: 100%; / * add width: after 100%, text-align: center ; will have the effect of (num since a set {
position: Absolute, flow out of the document, if the width is not set, she did not know how wide the occupied) * /
}
.num {Li
the display: inline-Block; / * * put sideways of the digital /
width: 20px;
height: 20px;
background-Color: Gray;
Color: Black;
text-align = left: Center;
Line-height: 20px;
border-RADIUS: 50%;
}
.btn {
position: Absolute;
height: 60px;
width: 30px;
background-Color: GreenYellow;
Color: White;
text-align = left: Center;
Line-height: 60px;
/ * Here are two common button * /
Top: 50%;
margin-Top: -30px; / * own half length with respect to * /
/ * beginning to make btn hidden, emerged into the mouse * /
Run the display: none;
}
.left_btn {
left: 0;
}
.right_btn {
right: 0;
}
.outer: hover {.btn
the display: Block;
}
.current {
/ * priority: The (id = 100, class = 10 , tag = 1)
internal label> id> class> tag * /
color:red!important;
/*如果不这么写还可以如下写法*/
}
/*.outer .num .current{*/
/*color:red;*/
/*}*/
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a><img src="img/t6.jpg"></a></li>
<li><a><img src="img/t2.jpg"></a></li>
<li><a><img src="img/t3.jpg"></a></li>
<li><a><img src="img/t4.png"></a></li>
</ul>
<ul class="num">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="left_btn btn"> < </div>
<div class = "right_btn, the BTN">> </ div>
</ div>
<Script the src = "jQuery-3.4.1.js"> </ Script>
<Script>
// implement the functions: manual switching images, i.e. manually rotation
$ ( '. NUM Li'). mouseOver (function () {
$ (the this) .addClass ( 'Current'). SIBLINGS (). removeClass ( 'Current')
// $ (the this) .index () to get the position of the object
var index = $ (the this) .index ()
// solve the problem of switching automatically to the manual
I = index;
// EQ () method, in which the set of objects by index get
$ ( 'img li.') .EQ (index) .fadeIn (1000) .siblings (). fadeOut (1000).
})
// function: automatic switching images, automatically rotate
var I = 0
var Time = the setInterval (mouve,1500)
function mouve() {
i++
if(i==4){
i=0;
}
$ ( '. NUM Li'). EQ (I) .addClass ( 'Current'). SIBLINGS (). RemoveClass ( 'Current')
$ ( '. IMG Li'). EQ (I) .stop (). fadeIn (1000) .siblings () STOP (). fadeOut (1000)..
}
// left sliding function:
function mouveL () {
IF (I == 0) {
I =. 4
}
i--
$ ( '. Li NUM '). EQ (I) .addClass (' Current '). SIBLINGS (). removeClass (' Current ')
// $ ('. IMG Li '). EQ (I) .fadeIn (1000) .siblings ( ) .fadeOut (1000)
// solve button clicks too quickly, the display can not keep up the hand speed issue () --- will be stopped in front of all of them, only the currently selected picture
$ ( '. img li') . eq ( . I) .stop () fadeIn (1000) .siblings () sTOP (). fadeOut (1000)..
}
// function: mouse into rotation is stopped, the mouse continues to rotate out of
$ () 'outer.'.hover(function () {clearInterval(time);
},function () {time=setInterval(mouve,1500)
})
//按钮
$('.right_btn').click(function () {
mouve()
})
$('.left_btn').click(function () {
mouveL()
})
</script>
</body>
</html>
