原生js实现简单轮播图
时间：2021-08-16 09:21:13|栏目：JavaScript代码|点击： 次
本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下
一、写入网页基本结构
body:
网页的最外部设置一个id为wrap的容器，取代body，这样方便我们做一些初始化
css:
初始化：
包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化
css设置：
根据图片数与图片宽度设置轮播图宽度
二、设置js逻辑
需要完成的功能有：
1、鼠标移入轮播图逐渐出现左右浮动块
2、点击浮动块切换图片
3、点击小圆点切换图片
4、切换图片同时切换小圆点
5、自动播放
6、鼠标移入轮播图自动播放停止、移出恢复自动播放
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
img{
display: block;
}
input{
outline: none;
}
html,body{
height: 100%;
overflow: hidden;
}
.content{
position: absolute;
top: 0;
left: 0;
}
.banner{
width: 600px;
height: 400px;
position: relative;
margin: 50px auto;
overflow: hidden;
}
.banner .bannerList{
position: absolute;
left:-600px;
top: 0;
width: 4800px;
height: 100%;
}
.banner .bannerList li{
float: left;
width: 600px;
height: 400px;
}
.banner .bannerList li img{
height: 100%;
width: 100%;
}
.banner .left,.banner .right{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 50px;
border: solid 2px gray;
font-size:30px;
text-align: center;
line-height: 50px;
color: rgb(255, 255, 255);
opacity: 0;
transition: 1000ms;
}
.banner .left{
left: 0px;
}
.banner .right{
right: 0px;
}
.banner .point{
position: absolute;
bottom: 30px;
left:50%;
transform: translateX(-50%);
}
.banner .point li{
float: left;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: gray;
margin: 5px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var bannerLeft=document.querySelector('.banner .left');
var bannerRight=document.querySelector('.banner .right');
var banner=document.querySelector('.banner')
var bannerList=document.querySelector('.banner .bannerList')
var liList=document.querySelectorAll('.banner .bannerList li')
var pointList=document.querySelectorAll('.banner .point li')
var start=-600;
timer2=setInterval(function(){ //设置定时器，自动播放
var a=30;
var index=bannerList.offsetLeft/-600+1;
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px' //无缝操作
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
// 创建一个移入出现函数
banner.addEventListener('mouseover',occur)
function occur(){
bannerLeft.style.opacity=1; //移入逐渐出现
bannerRight.style.opacity=1;
clearInterval(timer2); //移入取消自动播放
}
banner.addEventListener('mouseout',function(){
bannerLeft.style.opacity=0;
bannerRight.style.opacity=0; //移出消失
timer2=setInterval(function(){ //移出恢复自动播放
var a=30;
timer3=setInterval(function(){
a=a-1
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a==0){
clearInterval(timer3)
}
},
30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px';
}
},4000)
})
//设置左右浮动块点击变色以及滚动
function colorChange(){
this.style.color='black';
if(this.className=='right'){ //判断是哪边被点击
var index=bannerList.offsetLeft/-600+1;
var a=30;
timer=setInterval(function(){ //点击浮动块切换图片
a=a-1;
bannerList.style.left=bannerList.offsetLeft-20+'px';
if(a!=0){
bannerRight.removeEventListener('mousedown',colorChange)
bannerLeft.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mousedown',colorChange)
}
},30)
if(bannerList.offsetLeft==-4200){
bannerList.style.left=-600+'px'
index=2;
}
if(bannerList.offsetLeft==-3600){
index=1;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
else{
var a=30;
var index=bannerList.offsetLeft/-600-1;
timer=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+20+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
bannerRight.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer);
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
}
},30)
if(bannerList.offsetLeft==0){
bannerList.style.left=-3600+'px'
index=5;
}
if(bannerList.offsetLeft==-600){
index=6;
}
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='grey'
}
pointList[index-1].style.backgroundColor='red';
}
}
function colorReturn(){
this.style.color='white'
}
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
bannerLeft.addEventListener('mouseup',colorReturn)
bannerRight.addEventListener('mouseup',colorReturn)
for(var i=0;i<pointList.length;i++){
pointList[i].onmousedown=function(){
for(var i=0;i<pointList.length;i++){
pointList[i].style.backgroundColor='gray'
}
this.style.backgroundColor='red';
for(var b=0;b<pointList.length;b++){
if(pointList[b].style.backgroundColor==this.style.backgroundColor){
var a=30;
var step=-(b+1)*600-bannerList.offsetLeft;
timer1=setInterval(function(){
a=a-1;
bannerList.style.left=bannerList.offsetLeft+step/30+'px';
if(a!=0){
bannerLeft.removeEventListener('mousedown',colorChange)
bannerRight.removeEventListener('mousedown',colorChange)
}
if(a==0){
clearInterval(timer1)
bannerLeft.addEventListener('mousedown',colorChange)
bannerRight.addEventListener('mousedown',colorChange)
}
},20)
}
}
}
}
}
</script>
</head>
<body>
<div id="wrap">
<!-- 写出轮播图框架 -->
<div class="banner">
<ul class="bannerList">
<li>
<img src="./img/james6.jpeg">
</li>
<li>
<img src="./img/james1.jpg">
</li>
<li>
<img src="./img/james2.jpg">
</li>
<li>
<img src="./img/james3.jpg">
</li>
<li>
<img src="./img/james4.jpg">
</li>
<li>
<img src="./img/james5.jpeg">
</li>
<li>
<img src="./img/james6.jpeg">
</li>
<li>
<img src="./img/james1.jpg">
</li>
</ul>
<!-- 左右两个箭头 -->
<span class="left"> < </span>
<span class="right"> > </span>
<!-- 添加小圆点 -->
<ul class="point">
<li style="background-color: red;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
其中，将图片替换为其他图片可以实现不同的轮播图，值得一提的是，六张图片的轮播图需要放八张图，第八张与第二张一致，第一张与第七张一致，真正呈现出来的仅仅是第二张到第七张
