轮播图在我们的生活中很常见，制作也分简单的和复杂的，下面列举一个简单的轮播图小案例
首先我们进行布局也就是先插入四张图片
li是我们的小圆点（跟随图片移动，可以点击圆点移动图片等）
<body>
<div class="banner">
<img src="../第二天/images/banner1.png" alt="" style="display: block;">
<img src="../第二天/images/banner2.jpg" alt="">
<img src="../第二天/images/banner3.jpg" alt="">
<img src="../第二天/images/banner4.png" alt="">
</div>
<div id="curunt">
<ul>
<li class="curunt"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>然后安插css样式
div {
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
width: 1900px;
display: none;
}
ul {
position: absolute;
left: 875px;
top: 530px;
}
li {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #fff;
background: transparent;
}
.curunt {
background-color: #fff;
}
</style>然后进行js代码部分
首先分步
1.轮播图开始轮播（创建一个定时器利用index让第一张图片淡出下一张图片淡入如果index大于图片的总长度那么我们将index=0使轮播图重新开始轮播）
2.鼠标移入事件：
鼠标移入时我们使轮播图停止（直接将定时器清除），当鼠标移出时我们重新创建定时器（说白了就是把上面轮播图创建的代码复制一遍）
3.小圆点互动：
1.给小圆点绑定index图片淡入淡时随着图片添加curunt类（就是小圆点多了个背景色代表选中）
2.给小圆点绑定点击事件点击时使图片fadeIn他的兄弟全部淡出 ，然后同时给你点击的小圆点添加curunt类其他兄弟移出curunt类(排他思想)
<script>
let index = 0;
let timer = null;
$(function () {
let index = 0;
let timer = null;
let cur_index = index;
$(function () {
//轮播图创建
timer = setInterval(function () {
if (index >= $('.banner img').length) {
index = 0
}
$('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal');
$('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
index++
}, 1300)
//鼠标移入
$('.banner').hover(function () {
clearInterval(timer)
}, function () {//鼠标移出创建定时器
timer = setInterval(function () {
if (index >= $('.banner img').length) {
index = 0
}
$('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal')
$('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
index++
}, 1300)
})
//小圆点点击事件
$('#curunt li').click(function () {
index = $(this).index();
$('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal')
$('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
})
})
})
</script>
全部代码奉上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
width: 1900px;
display: none;
}
ul {
position: absolute;
left: 875px;
top: 530px;
}
li {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #fff;
background: transparent;
}
.curunt {
background-color: #fff;
}
</style>
<script src="../第二天/jquery.min.js"></script>
</head>
<body>
<div class="banner">
<img src="../第二天/images/banner1.png" alt="" style="display: block;">
<img src="../第二天/images/banner2.jpg" alt="">
<img src="../第二天/images/banner3.jpg" alt="">
<img src="../第二天/images/banner4.png" alt="">
</div>
<div id="curunt">
<ul>
<li class="curunt"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
let index = 0;
let timer = null;
$(function () {
let index = 0;
let timer = null;
let cur_index = index;
$(function () {
//轮播图创建
timer = setInterval(function () {
if (index >= $('.banner img').length) {
index = 0
}
$('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal');
$('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
index++
}, 1300)
//鼠标移入
$('.banner').hover(function () {
clearInterval(timer)
}, function () {//鼠标移出创建定时器
timer = setInterval(function () {
if (index >= $('.banner img').length) {
index = 0
}
$('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal')
$('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
index++
}, 1300)
})
//小圆点点击事件
$('#curunt li').click(function () {
index = $(this).index();
$('.banner img').eq(index).fadeIn('normal').siblings().fadeOut('normal')
$('#curunt li').eq(index).addClass('curunt').siblings().removeClass('curunt')
})
})
})
</script>
</body>
</html>over!