改写老师用javaScript实现的幻灯片，用jQuery实现.
幻灯片的实现先用CSS把图片框架设置好,把所有图片设置为隐藏，只显示第一张图片.
然后用jquery来动态切换图片路径 实现轮播图 幻灯片的效果。
收藏
<!doctype html>
<html lang="zh-cn">
<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">
<title>幻灯</title>
<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 {
text-align: center;
margin-top: -50px;
}
.box ul:last-of-type li{
list-style: none;
display: inline-block;
width: 26px;
height: 26px;
line-height: 26px;
background-color: black;
color: white;
border-radius: 50%;
margin: 0 5px;
}
.box ul:last-of-type li:hover {
cursor: pointer;
background-color: white;
color: black;
}
</style>
</head>
<body>
<div class="box">
<ul class="slider">
<!-- 只需要将指定的某一个显示出来即可,其它的用JS控制-->
<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>
$(function () {
// 先获取所有按钮
var lis = $('.box ul:last-of-type li');
// 获取当前选中的图片
var img = $('#active img');
// 循环按钮添加点击事件
lis.each(function (index,element) {
// 不能用 lis[index].on() lis[index].click() 只能用js原生的事件 可以用下面2种
// 第一种
// element.addEventListener('click',function () {
// img.attr('src','static/images/banner'+ parseInt(index+1) +'.jpg')
// },false);
// 第二种
element.onclick = function () {
img.attr('src','static/images/banner'+ parseInt(index+1) +'.jpg');
cycle(index);
}
});
// 定时执行
setInterval(function () {
var sum = Math.floor(Math.random()*3)+1;
img.attr('src','static/images/banner'+ sum +'.jpg');
cycle(sum-1);
},2000);
// 设置当前激活的按钮样式
function cycle(ele) {
lis.each(function (index) {
if (ele === index){
$(this).css({'color':'black','background-color':'white'})
}else {
$(this).css({'color':'white','background-color':'black'})
}
});
}
});
// lis.each(function (index,element) {
//
// if (lis[index] === ele){
// // 如果等于就是传过来的当前值 就设置前景色
// // lis[index].addClass('.active')
// // this.addClass('.active');
// console.log(ele);
// } else {
// // 否则取消前景色
// // lis[index].addClass('.default')
// // console.log(index);
// }
// })
// // 获取到所有按钮
// var lis = document.querySelectorAll('.box ul:last-of-type li');
// // 获取当前正在显示的图片
// var currentImg = document.querySelector('#active img');
//
// // 点击后切换图片
// for (var i = 0; i < lis.length; i++) {
// // 自定义索引,获取到当前正在显示的图片索引
// lis[i].index = i;
// // 给每一个按钮添加点击事件
// lis[i].onclick = function () {
// currentImg.src = 'static/images/banner'+parseInt(this.index+1) + '.jpg';
// };
// }
//
// // 用间歇式定时器, 每隔2秒随机切换图片
// setInterval(function () {
// var n = Math.floor(Math.random()*3)+1;
// currentImg.src = 'static/images/banner'+parseInt(n) + '.jpg';
// }, 2000);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
