实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="static/css/bootstrap.css">
<title>幻灯片/ carousel</title>
</head>
<style>
.box {
width:1920px;
height:500px;
}
.box ul {
padding: 0;
margin: 0;
}
/*初始图片*/
.box ul:first-of-type li {
list-style: none;
display:none;
}
.box ul:last-of-type {
margin-top: -50px;
text-align: center;
}
.box ul:last-of-type li {
list-style: none;
display: inline-block;
width:30px;
height:30px;
line-height: 30px;
margin: 0 5px;
background-color: black;
color : white;
border-radius : 50%;
}
.box ul:last-of-type li:hover {
background-color: white;
color: black;
cursor: pointer;
}
.active {
background-color: white;
color: black;
font-size:2em;
}
</style>
<body>
<div class="box">
<ul>
<li style="display: block" id="active"><img src="static/images/banner1.jpg" alt=""></li>
<li><img src="static/images/banner2.jpg" alt=""></li>
<li><img src="static/images/banner3.jpg" alt=""></li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script src="static/js/jquery-3.4.1.js"></script>
<script>
var lis = $(".box ul:last-of-type li");
var currentImg = $('#active img');
// console.log(currentImg);
lis.each(function(key) {
lis[key].addEventListener('click',function () {
currentImg[0].src ='static/images/banner' + parseInt(key + 1) +'.jpg';
for (var j=0 ; j<lis.length;j++) {
lis[j].classList.remove('active');
}
this.classList.add('active');
},false);
});
// 用间歇式定时器, 每隔2秒随机切换图片
setInterval(function () {
var n = Math.floor(Math.random()*3)+1;
currentImg[0].src = 'static/images/banner'+parseInt(n) + '.jpg';
for (var k=0 ; k<lis.length;k++) {
lis[k].classList.remove('active');
}
lis[n - 1].classList.add('active');
}, 2000);
</script>
<script src="static/js/bootstrap.js"></script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例