《JavaScript实现页面图片滚动播放》

最新推荐文章于 2025-06-29 16:28:34 发布

sass86

最新推荐文章于 2025-06-29 16:28:34 发布

阅读量5.1k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： WEB前端全栈开发

本文链接：https://blog.youkuaiyun.com/weixin_42268792/article/details/83480367

本文介绍如何利用JavaScript实现网页上的图片滚动播放功能。通过HTML布局，JavaScript控制逻辑，以及CSS样式设置，创建出一个无缝衔接的图片轮播组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码如下;

<div id="div_2">
			<img id="img1" src="img/img1.jpg" onmouseout="dongtupian()" onmouseover="stoptupian()">
			<ul id="ul1">
				<li id="li1" onmouseover="tingtupian(1,this)" onmouseout="jixu()"></li>
				<li id="li2" onmouseover="tingtupian(2,this)" onmouseout="jixu()"></li>
				<li id="li3" onmouseover="tingtupian(3,this)" onmouseout="jixu()"></li>
			</ul>
		</div>

JavaScript代码如下：

var n=1;//图片标记数
var dingshiqi;//让图片动的定时器
window.onload=init;
function init(){
	dingshiqi=window.setInterval("tupian()",1000);
	beijing=document.getElementById("li1");
}
//换图片函数
function tupian(){			
	var obj=document.getElementById("img1");
	n++;
	if(n>=4){
		n=1;
	}
	obj.src="img/img"+n+".jpg";
	for(var i=1;i<=3;i++){
		var li1=document.getElementById("li"+i);
	}
	beijing=document.getElementById("li"+