如上图所示，运用js实现4张图片的轮换播放，要求如下：
1.页面加载时4张图片按照顺序依次循环播放；
2.当鼠标移入对应图片序号的标签上时，图片显示为对应序号的图片；
3.当鼠标移除对应序号的标签上时，图片从当前序号开始依次循环播放。
实现以上功能的代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片轮换切换</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
a{
width: 14px;
height: 14px;
text-align: center;
display: inline-block;
line-height: 14px;
text-decoration: none;
color: black;
font-size: 14px;
background-color: #cccccc;
}
img{
width: 524px;
height: 190px;
}
#div1{
position: absolute;
top: 160px;
left: 100px;
}
.demo{
color: #ff7300;
}
#content{
position: relative;
}
</style>
<script type="text/javascript">
//获取放置在图片上的<a>标签集合
var as=document.getElementsByTagName("a");
var num=1;//控制第几个图片和a标签
window.onload=function() {
as[0].className = "demo";
for (var i = 0; i < as.length; i++) {
//设置鼠标移入<a>标签上切换图片
as[i].onmouseover = function () {
var img = document.getElementsByTagName("img")[0];
img.src = "./img/ad-0" + this.innerHTML + ".jpg";
//移除其余a标签的样式
for (var j = 0; j < as.length; j++) {
as[j].className = "";
}
//设置当前a标签的样式
this.className = "demo";
//设置num为当前图片的序号
num=parseInt(this.innerHTML);
//暂停图片循环播放定时器
clearInterval(id);
}
//设置鼠标移除时重新启动图片循环播放定时器
as[i].onmouseout=function(){
id=setInterval("tplh()",2000)
}
}
//启动图片循环播放定时器
id=setInterval("tplh()",2000);
}
//设置图片循环播放
function tplh(){
var img = document.getElementsByTagName("img")[0];
img.src="./img/ad-0"+num+".jpg";
//移除其余a标签的样式
for(var i=0;i<as.length;i++){
as[i].className="";
}
//设置当前a标签的样式
as[num-1].className="demo";
num++;
if(num>4){
num=1;
}
}
</script>
</head>
<body>
<div id="content">
<img src="./img/ad-01.jpg" />
<div id="div1">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
</div>
</body>
</html>
关键点在于对js事件的灵活运用，以及一些逻辑处理。
时间： 2024-08-03 21:11:40