收藏
批改状态：未批改
老师批语：
一、 jQuery代码实现幻灯片效果
需要实现的效果：
当鼠标点击按钮时显示对应的图片
当鼠标移动到按钮上时，按钮反色显示，提示用户当前所在位置
使用$.each()遍历按钮，使用$.on()监听"click"事件
关键代码如下：
$(function(){
let picNum = $(".box ul:last-of-type li");
let currentImg = $(".slider li");
for (i=0; i<currentImg.length; i++) {
$(currentImg[i]).attr("n", i); //添加自定义属性n
}
$.each(picNum, function(index) {
$(this).on("click", function(){
$(picNum[$("#active").attr("n")]).removeAttr("style"); //清除当前显示图片的按钮样式
$("#active").removeAttr("style id"); //清除当前显示图片的style、id属性，将图片隐藏
$(currentImg[index]).attr({style:"display:block",id:"active"}); //给点击按钮对应的图片添加style与id属性，将图片显示出来
$(picNum[index]).attr({style:"background-color:white; color:black"}); //将被点击的按钮高亮显示，与当前显示的图片对应
});
});
let j = $("#active").attr("n");
$(picNum[j]).attr({style:"background-color:white; color:black"}); //初始化，刷新页面时将当前显示图片对应的按钮高亮。
二、实现幻灯片按钮的高亮显示，与当前图片序号相对应
需要实现的效果
让图片自动切换，显示一定的时间
按钮高亮显示，与当前图片序号相对应
使用setInterval() 方法实现定时功能；
使用Math.radom() 方法产生随机数，得到图片序号
使用$.attr() 与 $.removeAttr() 方法对按钮属性进行修改，实现按钮外观的自动切换
关键代码如下：
setInterval(function(){
let i = Math.floor(Math.random()*3); //获取随机数0-2
j = $("#active").attr("n"); //找到当前显示的图片
$(picNum[j]).removeAttr("style"); //清除当前显示图片的按钮样式
$("#active").removeAttr("style id"); //清除当前显示图片的style、id属性，将图片隐藏
$(picNum[i]).attr({style:"background-color:white; color:black"}); //将显示图片对应的按钮高亮
$(currentImg[i]).attr({style:"display:block",id:"active"}); //显示随机数生成的对应位置的图片
}, 2000);
完整代码：
<!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">
<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(){
let picNum = $(".box ul:last-of-type li");
let currentImg = $(".slider li");
for (i=0; i<currentImg.length; i++) {
$(currentImg[i]).attr("n", i); //添加自定义属性n
}
$.each(picNum, function(index) {
$(this).on("click", function(){
$(picNum[$("#active").attr("n")]).removeAttr("style"); //清除当前显示图片的按钮样式
$("#active").removeAttr("style id"); //清除当前显示图片的style、id属性，将图片隐藏
$(currentImg[index]).attr({style:"display:block",id:"active"}); //给点击按钮对应的图片添加style与id属性，将图片显示出来
$(picNum[index]).attr({style:"background-color:white; color:black"}); //将被点击的按钮高亮显示，与当前显示的图片对应
});
});
let j = $("#active").attr("n");
$(picNum[j]).attr({style:"background-color:white; color:black"}); //初始化，刷新页面时将当前显示图片对应的按钮高亮。
setInterval(function(){
let i = Math.floor(Math.random()*3); //获取随机数0-2
j = $("#active").attr("n"); //找到当前显示的图片
$(picNum[j]).removeAttr("style"); //清除当前显示图片的按钮样式
$("#active").removeAttr("style id"); //清除当前显示图片的style、id属性，将图片隐藏
$(picNum[i]).attr({style:"background-color:white; color:black"}); //将显示图片对应的按钮高亮
$(currentImg[i]).attr({style:"display:block",id:"active"}); //显示随机数生成的对应位置的图片
}, 2000);
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
