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

╰+攻爆jí腚メ 2022-05-20 09:29 240阅读 0赞

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

![70][]

其中最为关键的方法就是使用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>

图片：

![70 1][]

![70 2][]

![70 3][]

[70]: /images/20220520/ce337dde65834395b409613e716c28af.png
[70 1]: /images/20220520/0aea8b53456f4b64ab0e6d615de27914.png
[70 2]: /images/20220520/935ca83a666e40e385bdc53c517231c3.png
[70 3]: /images/20220520/f368df08a8a245668ad00e1f5764a4a9.png