原生js(JavaScript)实现图片轮播功能

最新推荐文章于 2022-12-30 05:00:00 发布

Mr_ZhangSan

最新推荐文章于 2022-12-30 05:00:00 发布

阅读量291

点赞数

分类专栏：网页编程文章标签：网页图片轮播

本文链接：https://blog.csdn.net/sqhren626232/article/details/81069374

版权

网页编程专栏收录该内容

6 篇文章 1 订阅

订阅专栏

先将目录结构图送上，然后再讲几个注意的地方。

其中最为关键的方法就是使用setInterval(fun,time)这个方法。其中该方法有两个参数，第一个参数fun是你要实现的逻辑代码块。第二个参数time表示函数循环执行的周期，单位是毫秒。

左边三个图片与右边三个图片相对应。后边第一处被标记的地方代表对三张图片做出的共同样式。代码整体逻辑就是先取得imageShow下面的所有li，然后根据showNo的值决定三张图片数组中对应下标的图片显示，其他全部隐藏。

因为不知道怎么传视频，所以后面直接把代码和图片奉上。想学习的朋友请自行尝试。代码逻辑很简单，很容易就能看懂。祝各位能在编程的道路上越攀越高，越走越顺畅。

代码：

<%@ 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>图片轮播</title>
<style type="text/css">
	.imageStyle{width: 400px;height: 300px;background-repeat: no-repeat;list-style-type: none;}
</style>
<script type="text/javascript">
	function startUp(){
		var imageShow = document.getElementById("imageShow");
		var images = document.getElementsByTagName("li");
		var showNo = 1;
		setInterval(function(){
			for(var i=0;i<images.length;i++){
				if(showNo==i){
					images[i].style.display='block';
				}else{
					images[i].style.display='none';
				}
			}
			showNo++;
			showNo=showNo%images.length;
		},2000);
	}
</script>
</head>
<body onload="startUp()">
	<div id="hiddenDiv">
		<ul id="imageShow">
			<li class="imageStyle" style="background-image: url('image/psbCAMVXF5F.jpg');display: block;"></li>
			<li class="imageStyle" style="background-image: url('image/psbCAQUOM5Z.jpg');display: none;"></li>
			<li class="imageStyle" style="background-image: url('image/psbCAT61K9Y.jpg');display: none;"></li>
		</ul>
	</div>
</body>
</html>

图片：

Mr_ZhangSan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js(JavaScript)实现图片轮播功能

先将目录结构图送上，然后再讲几个注意的地方。其中最为关键的方法就是使用setInterval(fun,time)这个方法。其中该方法有两个参数，第一个参数fun是你要实现的逻辑代码块。第二个参数time表示函数循环执行的周期，单位是毫秒。左边三个图片与右边三个图片相对应。后边第一处被标记的地方代表对三张图片做出的共同样式。代码整体逻辑就是先取得imageShow下面的所有li，然后根据...
复制链接

扫一扫