效果:
效果视频
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.1.1.js"></script>
<style>
body,
ul {
padding: 0px;
margin: 0px;
}
ul {
list-style: none;
}
#box,
#box ul li,
#box ul li img {
width: 500px;
height: 300px;
}
#box {
margin: auto;
overflow: hidden;
position: relative;
}
#box #circle {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50px);
}
#box #circle li {
width: 15px;
height: 15px;
border-radius: 10px;
float: left;
margin: 0px 5px;
background-color: white;
cursor: pointer;
}
#box #circle li.active {
background-color: red;
}
</style>
<script>
$(function() {
var ul = $("<ul id='circle'></ul>") // 创建一个带有id为'circle'的ul元素,并将其添加到#box中
$("#img li").each(function() {
ul.append("<li></li>") // 对每个图片,向ul添加一个相应的圆圈
})
$("#box").append(ul);
var index = 0; // 初始索引值
change(index); // 调用change函数显示初始图片和圆圈
// 更改显示的图片和激活的圆圈的函数
function change(index) {
$("#circle li").removeClass("active").eq(index).addClass("active");
$("#img li").eq(index).fadeIn().siblings().fadeOut();
}
// 切换到下一张图片的函数
function nextImage() {
index = (index + 1) % $("#img li").length;
change(index);
}
var speed = 2000; //控制轮播的速度 1000=1秒
var interval = setInterval(nextImage, speed); // 设置一个间隔,每秒自动切换到下一张图片
// 在悬停在#box上时暂停间隔
$("#box").hover(
function() {
if (interval != null) {
clearInterval(interval);
interval = null;
}
},
function() {
if (interval == null) {
interval = setInterval(nextImage, speed);
}
}
);
// 为每个圆圈添加点击事件处理程序,以手动切换图片
$("#circle li").each(function() {
var index = $(this).index();
$(this).on('click', function() {
change(index);
});
});
})
</script>
</head>
<body>
<div id="box">
<ul id="img">
<li><img src="./img/spring.jpg" alt="" /></li>//修改成自己的图片地址
<li><img src="./img/summer.jpg" alt="" /></li>
<li><img src="./img/autumn.jpg" alt="" /></li>
<li><img src="./img/winter.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
图片和jquery-3.1.1.js链接网盘地址
链接:https://pan.baidu.com/s/1n9zyhiDcR2MiSnKVFsPW7Q
提取码:vje7