JS实现轮播图效果的3种简单方法

本文实例为大家分享了3种方法实现JS轮播图效果的具体代码，供大家参考，具体内容如下

Js实现轮播图01

实现思路

这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下：

实现效果

Js实现轮播图02

实现思路

这可能是轮播图最简单点的实现之一，通过改变background的图片链接来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变background属性里面的url（）图片链接的名字来实现切换效果。代码如下：

实现效果

Js实现轮播图03

本轮播图的实现，首先通过CSS代码将全部存放图片的li标签通过opacity属性设置为0来隐藏不显示， 通过js代码使用定时器不断调用类active突出显示li标签，同时隐藏兄弟li标签，再通过index++来实现切换循环显示的效果，当点击两边的按钮时，调用index++所在的方法实现切换的效果，没有复杂的算法，一点点基础一看代码就会学会，请大家参考。

实现效果

HTML代码

 
  
  
  
  
  
  
  
 
 
  

   

   

    

     
    
    

     
    
    

     
    
    

     
    
    

     
    
   
   
<
   
>
   

    
    

    

    

    

    

   
   
  
 

CSS代码

*{
 margin: 0;
 padding: 0;
}
a{
 list-style: none;
}
li{
 list-style: none;
}
.lunbo{
 width: 100%;
}
.content{
 width: 800px;
 height: 300px;
 margin: 20px auto;
 position: relative;
}
#item{
 width: 100%;
 height: 100%;
 
}
.item{
 position: absolute;
 opacity: 0;
 transition: all 1s;
 
}
.item.active{
 opacity:1;
}
img{
 width: 100%;
}
#btn-left{
 width: 30px;
 height: 69px;
 font-size: 30px;
 color: white;
 background-color:rgba(0,0,0,0.4);
 line-height: 69px;
 padding-left:5px;
 z-index: 10;/*始终显示在图片的上层*/
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
 cursor: pointer;
 opacity: 0;/*平时隐藏*/
}
.lunbo:hover #btn-left{
 /*鼠标滑入，显示图标*/
 opacity: 1;
}

#btn-right{
 width: 26px;
 height: 69px;
 font-size: 30px;
 color: white;
 background-color:rgba(0,0,0,0.4);
 line-height: 69px;
 padding-left: 5px;
 z-index: 10;
 position: absolute;
 right: 0;
 top: 50%;
 cursor: pointer;
 opacity: 0;
 transform: translateY(-60%);
}
.lunbo:hover #btn-right{
 opacity: 1;
}
#circle{
 height: 20px;
 display: flex;
 position: absolute;
 bottom: 35px;
 right: 25px;
}
.circle{
 width: 10px;
 height: 10px;
 border-radius: 10px;
 border: 2px solid white;
 background: rgba(0,0,0,0.4);
 cursor: pointer;
 margin: 5px;
}
.white{
 background-color: #FFFFFF;
}

JS代码

window.onload=function(){
var items=document.getElementsByClassName("item");
var circles=document.getElementsByClassName("circle");
var leftBtn=document.getElementById("btn-left");
var rightBtn=document.getElementById("btn-right");
var content=document.querySelector('.content');
var index=0;
var timer=null;

//清除class
var clearclass=function(){
 for(let i=0;i 
 

代码可能写的不是很好，存在很多不足，欢迎大家指点批评，我会努力去改正，有疑问欢迎留言，我会尽力去解答，谢谢大家花宝贵的时间来阅读这篇文章。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。