JS原生态实现轮播图（焦点图）

最新推荐文章于 2024-06-27 20:30:00 发布

陈建江！

最新推荐文章于 2024-06-27 20:30:00 发布

阅读量281

点赞数

分类专栏：工具代码 js 前端

本文链接：https://blog.csdn.net/weixin_44841312/article/details/117285418

版权

工具代码同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

本文介绍了如何因为第三方轮播图代码与个人网站布局冲突而选择自己编写轮播图的过程。通过观看提供的视频教程或参考代码，详细展示了HTML、CSS和JavaScript的实现步骤，确保轮播图功能正常且不会破坏页面原有的样式。同时，代码中包含了事件监听和定时器来实现自动切换效果。

摘要由CSDN通过智能技术生成

为什么要自己写轮播图：网上copy的代码放到自己的代码里面，由于它的定位问题导致我原有界面的布局全部打乱。所以需要自己写一个轮播图。

这里提供视频，看完视频后你可以选择跟着视频一起写，也可以参考我已经写好的代码，进行修改。

视频链接：https://www.bilibili.com/video/BV16W41127aQ?from=search&seid=6101400960869637959

下面的代码没有加注释，建议看视频

一，HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <meta http-equiv=x-ua-compatible content="ie=edge">
    <meta name=keywords content="">
    <meta name=description content="xxxxxxxxxxxxxxxxx平台">
    <title></title>
	<link rel="stylesheet" href="css/style.css" />
	<script src="js/jquery.min.js" type="text/javascript"></script>


</head>

   
<body>
<div class="c-banner">
	<div class="wrap">
		<ul>
			<li class="item active" ><img class="lunbo" src="img/top1.jpg"></li>
			<li class="item"><img class="lunbo" src="img/top2.jpg"></li>
			<li class="item"><img class="lunbo" src="img/top3.jpg"></li>
		</ul>
	</div>
	<div id="nextImg" >
		<img src="img/nexImg.png" />
	</div>
	<div id="preImg">
		<img src="img/preImg.png" />
	</div>
	<ul class="pointList">
		<li class="point active" data-index="0"></li>
		<li class="point" data-index="1"></li>
		<li class="point" data-index="2"></li>
	</ul>
</div>
</body>
</html>
<script src="js/index.js" type="text/javascript"></script>

二，CSS部分

*{
	margin: 0px;
	padding: 0px;
}
a{
	text-decoration:none;
}
li{
	list-style:none;
}

.list{
	width:100%;
	list-style:none;
}
.item{
	height:100%;
	width:100%;
	position:absolute;
	opacity: 0;
	transition: all .5s;
}
.wrap{
	top: 100px;
	height:100%;
	width:100%;
	position: relative;
}
#nextImg{
	position:absolute;
	height: 100px;
	width: 40px;
	top: 50%;
	right: 0px;
	z-index: 11;
	cursor: pointer;

}
#preImg{
	position:absolute;
	height: 100px;
	width: 40px;
	top: 50%;
	left: 0px;
	z-index: 11;
	cursor: pointer;

}
.lunbo{
	height:500px;
	width:100%;
}
.item.active{
	z-index: 10;
	opacity: 1;
}

.pointList{
	position: relative;
	left: 45%;
	top:530px;
	z-index: 11;
	list-style: armenian;

}
.point{
	width: 25px;
	height: 25px;
	float: left;
	background-color: grey;
	margin-right: 20px;
	border-radius:100% ;
	border:2px solid white ;
	cursor: pointer;
}

.point.active{
	background-color: white;
}

三，JS部分

let item=document.getElementsByClassName('item');
let point=document.getElementsByClassName('point');
let goPreBtn=document.getElementById('preImg');
let goNextBtn=document.getElementById('nextImg');
var time=0;

var index=0;//轮播图索引

var clearActive=function(){//清除要显示的图的标记
    for(let i=0; i<item.length;i++){
        item[i].className='item';
    }
    for(let j=0; j<point.length;j++){
        point[j].className='point';
    }
}

var goIndex=function(){//给要显示的轮播图加标记
    clearActive();
    time=0;
    item[index].className='item active';
    point[index].className='point active';
}

var goNext=function(){//改变索引进行下一页
    if(index<item.length-1){
        index++;
    }
    else{
        index=0;
    }
    goIndex();
}

var goPre=function(){//改变索引进行上一页
    if(index>0){
        index--;
    }
    else{
        index=item.length-1;
    }
    goIndex();
}

goNextBtn.addEventListener('click',function(){//把函数绑定到图标上
    goNext();
})

goPreBtn.addEventListener('click',function(){
    goPre();
})

for(let i=0;i<point.length;i++){
    point[i].addEventListener('click',function(){
        index=this.getAttribute('data-index');
        time=0;
        goIndex();

    })
}

setInterval(function(){
    time++;
    if(time==20){
        goNext();
    }
    if(time>20){
        time=0;
    }
},100)