需求：轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图效果</title>
<style>
.play {
margin: 100px auto;
1226px;
height: 460px;
border: 1px solid #999;
position: relative;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.play img {
display: block;
1226px;
height:460px;
}
.imglist li {
position: absolute;
left:0;
top:0;
opacity: 0;
transition: opacity 1s;
}
.imglist li.current {
opacity: 1;
}
.control-list {
position: absolute;
bottom:20px;
right:20px;
}
.control-list span {
font-size:0px;
float:left;
margin-right:5px;
12px;
height:12px;
border:1px solid #999;
border-radius: 7px;
background: #999;
cursor: pointer;
}
.control-list span.current {
background: #fff;
}
.slide {
position: absolute;
top:50%;
transform: translate(0, -50%);
40px;
height:80px;
background:rgba(0,0,0,.6);
color:#fff;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 80px;
cursor: pointer;
opacity: .5;
transition: .3s;
}
.slide:hover {
opacity: 1;
}
.slide-left{
left:0;
}
.slide-right {
right:0;
}
</style>
</head>
<body>
<div id="play" class="play">
<ul class="imglist">
<li class="current">
<a href="#">
<img src="./images/play01.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/play02.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/play03.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/play04.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/play05.jpg" alt="">
</a>
</li>
</ul>
<div class="control-list">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="slide-list">
<span class="slide slide-left"><</span>
<span class="slide slide-right">></span>
</div>
</div>
<script src="../jquery-3.3.1.js"></script>
<script>
//轮播图效果
$(function(){
var m = 0; //循环变量
var delay = 3000; //轮播的时间间隔
var length = 5; //轮播的数量
//设置定时
var runTime = setInterval(runPlay, delay);
//鼠标悬浮 定时停止
$('#play').on('mouseenter', function(){
clearInterval(runTime);
}).on('mouseleave', function(){
runTime = setInterval(runPlay, delay)
});
//给控制按钮 绑定 单击事件
$('.control-list span').on('click', function(){
//console.log($(this).index())
m = $(this).index();
controlImage(m);
});
//向右
$('.slide-right').on('click', function(){
m ++;
if (m >= length) {
m = 0;
}
controlImage(m)
});
//向左 上一个
$('.slide-left').on('click', function(){
m --;
if (m < 0) {
m = length-1
}
controlImage(m)
})
//定时函数
function runPlay() {
//循环变量累加
m ++;
//判断
if (m >= length) {
m = 0;
}
//调用函数 控制图片
controlImage(m)
}
//控制图片的变化
// n表示 要第几个显示
function controlImage(n) {
$('.imglist li').removeClass('current').eq(n).addClass('current');
$('.control-list span').removeClass('current').eq(n).addClass('current');
}
})
</script>
</body>
</html>