<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.outer {
margin: 50px auto;
hight: 350px;
width: 600px;
position: relative;
}
img {
hight: 400px;
width: 400px;
position: absolute;
top: 0;
left: 0
}
.num {
position: absolute;
top: 280px;
text-align: center;
width: 60%;
}
.num li {
display: inline-block;
height: 20px;
width: 20px;
background-color: gray;
color: #ffffff;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin: 0 10px;
}
.btn {
position: absolute;
height: 60px;
width: 30px;
background-color: gray;
color: #ffffff;
text-align: center;
line-height: 60px;
margin-top: 140px;
}
.left_btn {
left: 0;
}
.right_btn {
right: 200px;
}
.outer:hover .btn {
display: block;
}
.current {
background-color: red !important;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a><img src="img1.jpeg"></a></li>
<li><a><img src="img2.jpeg"></a></li>
<li><a><img src="img3.jpeg "></a></li>
<li><a><img src="img4.jpeg"></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 type="text/javascript" src="jquery-3.5.0.js"></script>
<script>
/* 手动轮播 */
$(".num li").mouseover(function() {
$(this).addClass("current").siblings().removeClass("current");
var index = $(this).index();
$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
//解決自动轮播到1时,突然手动点击了3,轮播时还是会从2开始
//变量i引起的,需要在手动操作完之后,把index赋值给i
i = index;
})
/* 自动轮播 */
var i = 0;
function move() {
if(i==4){
i=0;
}
//stop():停掉之前的。然后再开始,避免手动操作导致混乱
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
i++;
}
var time = setInterval(move, 3000);
/* 因为自动轮播和手动轮播互相干扰,添加功能:当鼠标放到图片市,不自动轮播 */
//停止自动轮播
function f1(){
clearInterval(time);
}
//回复自动轮播
function f2(){
time = setInterval(move, 3000);
}
$(".outer").hover(f1, f2);
//按钮轮播
//点击右侧按钮,相当于触发一次自动轮播
function right(){
move();
}
$(".right_btn").click(right);
//左侧按钮
function moveLeft() {
if(i==0){
i=4;
}
i--;
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
$(".left_btn").click(moveLeft);
//遗留问题:图片个数写死了
//图片的html代码也写死了,如果根据配置的图片显示就好了
</script>
</body>
</html>
效果