JavaScript实现HTML轮播，简单有效

说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。

轮播呈现方式多种多样，鄙人在这里给出一个比较low的方法，若有大神指教，不甚感激！

思路：

1、在body里面设置一个img标签，src路径暂且不设置，并给img标签设置id。

2、写一个function函数，里面设置src随着某种变量而改变的条件。

下面撸代码！！！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img id="image"/>
<script >
function $(id){
return document.getElementById(id);
}
var index=1;
function setSrc(){
$("image").src="./img/"+index+".png";
++index;
if(index==3){
index=1;
}
}
setSrc();
setInterval("setSrc()",500);
</script>
</body>
</html>

在这里我采用了投机取巧的方式，我的图片名都是：

读者可以按照需要改变一下函数的结构

关注，不迷路，每日分享大量前端知识。

代码运行结果图

因为平时用vue，写代码习惯了，这个轮播图的代码是在vue的脚手架里写的，把它拆解起来，写在html原理一样，如果觉得拆解吃力的话，可以参考我的上篇文章vue脚手架的使用，将这个代码粘贴到helloworld.vue代码运行就可以了，基本功能实现了，替换成自己的图片就可以运行了。唯一美中不足的就是轮播图一开始不是自动播放的，需要鼠标在图片上划过一次才能自动播放，如果用原生js代码写的话，用windoes.onload和init，建立定时器，然后清除等操作可以实现自动播放，和鼠标放在上面后停止播放功能，遇到的问题就是，vue加载页面自动开始触发的定时器写在mounted中，但是将定时器销毁，只能写在钩子函数befdestroy和destroy中才能销毁（我感觉是）中间需要鼠标放在图片上停止定时器实现不了，对vue的生命周期函数理解的还是不够，如果有更好的实现方式还请评论区留言交流以后还得多多练习。

体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;
			padding: 0;}
#box {
	width: 100%;
	height: 502px;
	overflow: hidden;/*溢出的部分:隐藏*/
}

#box .menu {
	width: 607%;
	position: relative;
	margin-left: -40px;/*左外边距*/
	bottom: 0px;/*低边距离*/

}

#box .menu ul li {
	float: left;/*浮动:左,就是要把图片往左浮动*/
	list-style: none;
}




		</style>
	</head>
	<body>
		<div id="box"><!--最外的大盒子-->
			<div class="menu"><!--这里是写入我们要播放的图片-->
				<ul><!--无序列表-->
					<li><img src="image/01.jpg" width="1546px;" height="500px"></li>
					<li><img src="image/02.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/03.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/04.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/05.jpg" width="1546px;" height="500px"></li>
                    <li><img src="image/06.jpg" width="1546px;" height="500px"></li>
				</ul>
			</div>
			
		</div>
		<!--在这里导入javascript文件也就是js代码，如果没有这个就没有动画-->
		<script src="jquery-3.4.1.min.js" type="text/javascript"></script>
		<!--写代码-->
        <script>
//      	function就是函数执行
        	$(function(){
        		//一般获取元素用var,从第一张图片开始
        		var _index=0,  
//        		 窗口宽度,就是把所有图片放在水平线上的总宽度
        		window_width=1546, 
        		//时间循环
        		timer=null,  
        		//图片内容一共六张
        		images_count=6;
        		//获取下一个
        		function nextPlay(){
        			if(_index>images_count-1){//_index指的是每一张图片
        				_index=0;//从第一张开始
        				              //stop() 停留，animate自定义动画往左运动，
        				$("#box .menu").stop().animate({left:-window_width*_index},500);
        			}else{
        				$("#box .menu").stop().animate({left:-window_width*_index},500);
        			} 
        			//每一个图片加一就是自动按顺序出来
        			_index++;
        		}
        		timer=setInterval(nextPlay,2000);
        	})
        </script>
	</body>
</html>

javascript文件也就是js文件：链接：https://pan.baidu.com/s/1_RUihF6SdA4-NJcqHGqm1g

提取码：mnfg

在线咨询

上一篇：全宇宙最全景深合成攻略
下一篇：JavaScript函数进阶：函数的定义和调用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript实现HTML轮播，简单有效

您的项目需求