简易代码实现超简单实用轮播图

最新推荐文章于 2022-09-08 00:27:36 发布

高中不复，大学纷飞

最新推荐文章于 2022-09-08 00:27:36 发布

阅读量1k

点赞数 1

文章标签： banner 轮播图

本文链接：https://blog.csdn.net/qq_44760912/article/details/103494931

版权

简易代码实现超简单实用轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			.hr_100 {height: 100px;}
			.box {
				width:520px;
				height:300px;
				border: 1px solid red;
				margin: 0 auto;
			}
			img {
				width:520px;
				height:280px;
			}
			
		</style>
	</head>
	<body>
		<div class="hr_100"></div>
		<div class="box"><img src="img/taobao1.png" alt="" id="img0"/>
		<div id="number" >
       <span>1</span>   
       <span>2</span>    
       <span>3</span>
       <span>4</span>
       <span>5</span>
     </div>
		</div>
		<script>
			
			var i=0;
			var lb_img=["img/taobao1.png","img/taobao2.png","img/taobao3.png","img/taobao4.png","img/taobao5.png"];
			function imgBox() 
			{	
			var imgbox=document.getElementById("img0");
			imgbox.src=lb_img[i];
			
			var spanArray=
	   		document.getElementsByTagName("span");//它是可以相当一个数组的
	   		for(var t=0;t<spanArray.length;t++) {
			spanArray[t].style.color="black";}
	   		//这个大括号决定了是同时显示还是从2开始变色
			spanArray[i].style.color="red";
			//这里的i必须放后面才不会错位
			i++;
			if(i==5)
			{
				i=0;
			}
   			}
			setInterval("imgBox()",1000);//一般这里面放的还是函数，所以还是要构建函数
		</script>
//首先是构建一个数组，用来存放图片的路径；
通过调用图片的id.src=数组[],来对应到相应的照片；
然后用setInterval("imgBox()",1000);实现每一秒调用一次。
但是缺陷在于这是一种置换图片的方式，并不是从左到右的一种推进式轮播
	</body>
</html>

2.
标准化：即每个函数只实现一个效果或功能，便于封装，调用，层次也清晰。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#outer{
	width:520px;
	height:300px;
	border:1px solid yellow;
	margin:0 auto;
	}
</style>
</head>

<body>
  <div id="outer">
     <img src="img/taobao1.png" id="shop_pic"/>
     <div id="number" >
       <span>1</span>   
       <span>2</span>    
       <span>3</span>
       <span>4</span>
     </div>
  </div>
</body>
<script>
   var i=0;
   var shop_pic_names = 
   ["img/taobao1.png","img/taobao2.png","img/taobao3.png","img/taobao4.png"];
   function AutoChangePic()
   {
	  var picEle =
	  document.getElementById("shop_pic");
	  picEle.src =shop_pic_names[i];
	  AutoChangeNumColor(i);
	  i++; 
	  //i= i%4;           
	  if( i==4)
	  {
		  i=0;
	  }
	  //-------------
	  /*
	  var picArray=
	  document.getElementsByTagName("img");
	  picArray[0].src="pic2.jpg";
	  */
   }
   function AutoChangeNumColor(i)
   {
	   var spanArray=
	   document.getElementsByTagName("span");
	   for(var t=0;t<spanArray.length;t++)
	   {
		 spanArray[t].style.color="black";   
	   }
	   spanArray[i].style.color="red";
	   
	   
   }
   setInterval("AutoChangePic()",1000);
</script>
</html>

两者效果是一样的，有对比才更好理解。
图片来自淘宝banner图，可自行下载！

高中不复，大学纷飞

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
简易代码实现超简单实用轮播图

简易代码实现超简单实用轮播图1.<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> .hr_100 {height: 100px;} .box { width:520px...
复制链接

扫一扫