如何使用原生JS实现轮播图？

最新推荐文章于 2022-04-08 12:09:08 发布

鱼天龙

最新推荐文章于 2022-04-08 12:09:08 发布

阅读量128

点赞数

分类专栏：经验总结

本文链接：https://blog.csdn.net/weixin_44709426/article/details/103785776

版权

经验总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一个简单的案例

设置HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="wrap">
	 	<ul class="list">
		   <li class="item active" >0</li>
		   <li class="item">1</li>
		   <li class="item">2</li>
		   <li class="item">3</li>
		   <li class="item">4</li>
	 	</ul>
	 	<ul class="pointest">
	   
		   <li class="point point-active" date-index="0"></li>
		   <li class="point" date-index="1"></li>
		   <li class="point" date-index="2"></li>
		   <li class="point" date-index="3"></li> 
		   <li class="point" date-index="4"></li>  
	 	</ul>
		 <input type="button" class="btn" id="left" value="<">
		 <input type="button" class="btn" id="right" value=">">
	</div>
    <script src="index.js"></script>
</body>
</html>

接着设置CSS样式

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
li{
    list-style: none;
}
#wrap{
    width: 800px;
    height: 400px;
    position: relative;
}
.list{
    position: relative;
    width: 800px;
    height: 400px;
}
.item{
    width: 100%;
    height: 100%;
    position: absolute;
    font-size: 50px;
}
.item:nth-child(1){
     background-color:orange;
}
.item:nth-child(2){
    background-color: blue;
}
.item:nth-child(3){
    background-color: yellow;
}
.item:nth-child(4){
    background: lightgreen;
}
.item:nth-child(5){
    background-color: pink;
}
.active{
    z-index: 10;
}
/* 按钮 */
.btn{
    width: 50px;
    height: 100px;
    text-align: center;
    position: absolute;
    top: 150px;
    z-index: 100;
}
#left{
    left: 0;
}
#right{
    right: 0;
}

/* 设置容器样式 */
.pointest{
    list-style: none;
    padding-left: 0px;
    position: absolute;
    right: 20px;
    bottom: 20px;
     z-index: 1000;
}
/* 导航点 */
.point{
    float: left;
    list-style: none;
    margin-right: 10px;
    width:8px;
    height: 8px; 
    border-radius: 100%;
    background-color: rgba(0,0,0,0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
}
.point-active{
    background-color: rgba(255,255,255,0.8);
}

最后使用JS实现轮播图

window.onload=function(){
	var items = document.getElementsByClassName('item'); //图片
	var goPreBtn=document.getElementById("left");
	var goNextBtn=document.getElementById("right");
	var points=document.getElementsByClassName("point");  //点

	var index = 0; //表示第几张图片在展示， 
	/* 设置一个class="active"，谁有这个类名，就谁展示！ */

	
		// 定义一个函数，用来清除active类名。
		var clear=function(){
			for(var i=0; i<items.length; i++) {
				items[i].className="item";
			}
			for(var i=0;i<points.length;i++) {
				points[i].className="point";
			}
		}
		// goIndex这个函数实现active类名的跳转！
		var goIndex=function() {
			clear();
			//console.log(index)
			items[index].className="item active";
			points[index].className="point point-active";
		}
		// goNextbtn这个函数实现跳转下一张图片！
		goNextBtn.onclick=function() {
            if(index<4)
                index++;
            else 
            	index=0;
            goIndex();
		}
		// goProbtn这个函数实现跳转上一张图片！
		goPreBtn.onclick=function() {
			if(index==0)
				index=4;
			else
				index--;
			goIndex();
		}
		//小圆点联动
		for(var i=0; i<points.length; i++) {
			points[i].onclick=function(){
				var pointIndex=this.getAttribute("date-index");/*attribute属性*/
	            // console.log(pointindex);  /*console操作台*/	
	            index=pointIndex;
				goIndex();
			}
		}
}