利用setTimeout && setInterval实现图片轮播

最新推荐文章于 2023-02-27 22:51:45 发布

梦诺

最新推荐文章于 2023-02-27 22:51:45 发布

阅读量1.7k

点赞数 1

分类专栏： HTML JSP JAVAWEB 文章标签：原创心得

本文链接：https://blog.csdn.net/qq_24973007/article/details/81436871

版权

JAVAWEB 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

JSP

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

作者原创，转载请注明来源 😃

setTimeout(a,b);

在b/1000秒后执行a函数（只执行一次）

var c = setInterval(a,b);

每b/1000秒执行一次a函数，知道遇到
clearInterval（c）;结束

两者逻辑并用实现图片轮播：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.img_main{
	width:430px;
	height:250px;
	overflow:hidden;
}

.img, td{
	border:none;
	padding:0;
	margin:0;
}

.imgs td{
	width:430px;
	height:250px;
}
.imgs img{
	width:430px;
	height:250px;
}
</style>
</head>
<body>
	<div id=main class=img_main>
		<table id=imgs class=imgs  border="0" align="center" cellpadding="0" cellspacing="0" >
			<tr>
				<td><img src="res/ind001.jpg"></td>
				<td><img src="res/ind002.jpg"></td>
				<td><img src="res/ind003.jpg"></td>
				<td><img src="res/ind004.jpg"></td>
				<td><img src="res/ind005.jpg"></td>
				<td><img src="res/ind001.jpg"></td>
			</tr>
		</table>
	</div>
	<span id=tx></span>
<script type="text/javascript">
	var a = document.getElementById("main");
	var b = document.getElementById("imgs");
	var len = b.offsetWidth;
	var tx = document.getElementById("tx");
	var i = 0;
	var x = 10;
	
	function dos(){
		if(len - a.scrollLeft <=430){
			i = 0;
			a.scrollLeft -=len;
		} else {
			a.scrollLeft +=x;
		}
		tx.innerText = "left:"+a.scrollLeft+",len:"+len+",lens:"+b.offsetWidth+",减法:"+(len - a.scrollLeft);
		i ++;
		
		if(a.scrollLeft % 430 == 0){
			i = 0;
			clearInterval(run);
			setTimeout(sd,3000);
		}
	}
	
	function sd(){
		run = setInterval(dos,30);
	}
	
	var run = setInterval(dos,30);
</script>
</body>
</html>

APP、软件、网站开发可以在下方评论处留言

梦诺

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
利用setTimeout && setInterval实现图片轮播

作者原创，转载请注明来源 :-)setTimeout(a,b);在b/1000秒后执行a函数（只执行一次）var c = setInterval(a,b);每b/1000秒执行一次a函数，知道遇到 clearInterval（c）;结束两者逻辑并用实现图片轮播：&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta http-equiv=&quot;Cont...
复制链接

扫一扫