JS实现轮播图效果的方法有哪些

这篇文章主要讲解了"JS实现轮播图效果的方法有哪些"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"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;//清除classvar clearclass=function(){ for(let i=0;i
感谢各位的阅读，以上就是"JS实现轮播图效果的方法有哪些"的内容了，经过本文的学习后，相信大家对JS实现轮播图效果的方法有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！