轮播图实例
作者：互联网
<!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;/*使数字显示出来*/
bottom: 20px;
text-align: center;
width:100%;/*加上width:100%之后，text-align: center;才会有效果（因为给num设置了{
position:absolute，脱离了文档流，如果不设置宽度，她不知道自己占据多宽）*/
}
.num li{
display: inline-block;/*使数字横着放*/
width: 20px;
height:20px;
background-color: grey;
color:black;
text-align:center;
line-height: 20px;
border-radius:50%;
}
.btn{
position: absolute;
height:60px;
width:30px;
background-color: greenyellow;
color:white;
text-align: center;
line-height: 60px;
/*以下是两个按钮公共的*/
top:50%;
margin-top: -30px;/*相对于自己长度的一半*/
/*刚开始让btn隐藏，鼠标进去使其显现出来*/
display:none;
}
.left_btn{
left:0;
}
.right_btn{
right:0;
}
.outer:hover .btn{
display:block;
}
.current{
/*优先级：如（id=100,class=10,tag=1）
标签内部>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 btn"> > </div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
//实现功能：手动切换图片，即手动轮播
$('.num li').mouseover(function () {
$(this).addClass('current').siblings().removeClass('current')
// $(this).index() 拿到对象的位置
var index=$(this).index()
//解决自动向手动切换问题
i=index;
//eq（）方法，在集合里面通过索引去拿对象
$('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000)
})
// 实现功能：自动切换图片，即自动轮播
var i=0
var time=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)
}
//向左滑动的功能：
function mouveL() {
if(i==0){
i=4
}
i--
$('.num li').eq(i).addClass('current').siblings().removeClass('current')
// $('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000)
//解决按钮点击过快，显示跟不上手速问题（）---将前面的所有的都停掉，只显示当前选中图片
$('.img li').eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
}
// 实现功能：鼠标进去轮播停止，鼠标出来继续轮播
$('.outer').hover(function () {clearInterval(time);
},function () {time=setInterval(mouve,1500)
})
//按钮
$('.right_btn').click(function () {
mouve()
})
$('.left_btn').click(function () {
mouveL()
})
</script>
</body>
</html>
标签：num,轮播,li,current,实例,siblings,btn,1000 来源： https://www.cnblogs.com/startl/p/12362882.html