用原生js实现轮播图效果，点击切换图片、定时切换

r囧r小猫 2023-07-03 10:51 137阅读 0赞

其实轮播图挺简单的，功能实现就是Javascript 不懂的朋友可以私信我哦！  
要想效果好，边框阴影加圆角：  
1：边框 boder  
2：阴影 shadow(box-shadow:盒子阴影 text-shadow:文子阴影)  
3：圆角 border-radius  
后面也出几篇博客聊聊这三宝

## 轮播图示例代码如下： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.wrap{ 
    				width: 533px;
    				height: 300px;
    				position:relative;
    				box-shadow: 5px 5px 5px #cccccc;
    			}
    			.list{ 
    				width: 530px;
    				height: 300px;
    				list-style: none;
    				position:relative;
    				padding-left: 0px;
    			}
    			.item{ 
    				width: 100%;
    				height: 100%;
    				font-size: 50px;
    				color: white;
    				position:absolute;
    				opacity: 0;
    				transition: all 0.6s;
    			}
    			.btn{ 
    				width: 50px;
    				height: 100px;
    				position:absolute;
    				top: 100px;
    				z-index: 100;
    				opacity: 0.7;
    			}
    			#goPre{ 
    				left: 0px;
    			}
    			#goNext{ 
    				right: 0px;
    			}
    			.item.active{ 
    				opacity: 1;
    				z-index: 10;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrap">
    			<ul class="list">
    				<li class="item active"><img src="http://placehold.it/533x300?text=1" ></li>
    				<li class="item"><img src="http://placehold.it/533x300?text=2" ></li>
    				<li class="item"><img src="http://placehold.it/533x300?text=3" ></li>
    				<li class="item"><img src="http://placehold.it/533x300?text=4" ></li>
    				<li class="item"><img src="http://placehold.it/533x300?text=5" ></li>
    			</ul>
    			<button type="button" class="btn" id="goPre"><</button>
    			<button type="button" class="btn" id="goNext">></button>
    		</div>
    		<script type="text/javascript">
    			//获取到所有的li列表
    			var items=document.getElementsByClassName("item");
    			//获取左右切换按钮
    			var goPreBtn=document.getElementById("goPre");
    			var goNextBtn=document.getElementById("goNext");
    			//index表示第几张图片在展示-- 第index张图片有active这个类名
    			var index=0;
    			var clearActive=function(){ 
    				for(var i=0;i<items.length;i++){ jiehuan
    					items[i].className='item';
    				}
    			};ji
    			 function goIndex(){ 
    				clearActive();
    				items[index].className='item active';
    			};
    			 function goNext(){ 
    				if(index<4){ 
    					index ++;
    				}else{ 
    					index=0;
    				};
    				goIndex();
    			};
    			 function goPre(){ 
    				if (index == 0){ 
    					index=4;
    				}else{ 
    					index --;
    				}
    				goIndex();
    			};
    			//左键按钮 调用goPre函数 切换到上一张
    			goPreBtn.addEventListener('click',function(){ 
    				goPre();
    			});
    			//右键按钮 调用goNext函数 切换到下一张
    			goNextBtn.addEventListener('click',function(){ 
    				goNext();
    			});
    			//定时调用函数 每隔两秒调用goNext函数
    			var timer;
    			timer=setInterval(function(){ 
    				goNext();
    			},2000)//2000毫秒=1秒
    		</script>
    	</body>
    </html>

切换带有过渡效果哦 不知道怎么上传动态图 所以只能截图了 后面我去弄以下看怎么弄gif  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5yb25nbG9uZzIw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5yb25nbG9uZzIw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200205221944164.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5yb25nbG9uZzIw,size_16,color_FFFFFF,t_70