<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;/*一个相对，其他都是绝对固定*/
}
.img li{
position: absolute;
list-style: none;
top: 0;
left: 0;
}
.num{
position: absolute;
bottom: 18px;
left: 270px;
background-color: white;
list-style: none;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
}
.btn{
position: absolute;
top: 50%;
/*left: 0;*/
width: 30px;
height: 60px;
background-color: lightgrey;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px;
display: none;
}
.left{
left: 0px;
}
.right{
right: 0px;
}
.outer:hover .btn{/*悬浮的时候显示左右*/
display: inline-block;
}
.num .active{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="123.jpg" alt=""></a></li>
<li><a href=""><img src="123.jpg" alt=""></a></li>
<li><a href=""><img src="123.jpg" alt=""></a></li>
<li><a href=""><img src="123.jpg" alt=""></a></li>
<li><a href=""><img src="123.jpg" alt=""></a></li>
<li><a href=""><img src="123.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script src="jquery-3.3.1.min.js"></script><!--不加此句$不识别-->
<script>
var img_num= $(".img li").length;
for(var i=0;i<img_num;i++) {
$(".num").append("<li></li>")
}
$(".num li").eq(0).addClass("active");//序列0加上类名active
//手动轮播
$(".num li ").mouseover(function () {
var index=$(this).index();
$(this).addClass("active").siblings().removeClass("active");//有无active
//$(".img li").eq(index).show(1).siblings().hide()
$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);//fadein 和show功能相同都是显示，一个是淡出显示一个是直接显示
});
//自动轮播,红点移动
var i=0;
var c=setInterval(GO_R,500);//5秒走一次
function GO_R() {
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/wfl9310/p/9295297.html
时间： 2024-10-20 11:13:58