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

Js实现轮播图01

实现思路

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

实现效果

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>轮播图实现01</title>
  <style type="text/css">
   .lunbo{
    width: 900px;
    height: 400px;
    margin:100px auto;
   }
   .lunbo img{
    width: 100%;
    height:100%;
   }
  </style>
 </head>
 <body>
  <!--轮播图模块 -->
  <div class="lunbo">
   <img id="lunbo_img" src="./pic/img3.jpeg" >
  </div>
  <!-- Js代码 -->
    <script>
      var index = 1;
        function lunbo(){
            index ++ ;
            //判断index是否大于3
            if(index > 3){
                index = 1;
            }
            //获取img对象
            var img = document.getElementById("lunbo_img");
            img.src = "./pic/img"+index+".jpeg";
        }
        //2.定义定时器
        setInterval(lunbo,2000);
        /*切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo（）方法，而导致定时器没用。
 </script>
 </body>
</html>

Js实现轮播图02

实现思路

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

实现效果

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>轮播图实现02</title>
  <style>
   body{
    margin: 0;
    padding: 0;
   }
   .lunbo{
    width:100%;
    height:720px;
    background-image: url(pic/img1.jpeg);/*背景图片*/
    background-size:100% 100%; 
   }
  </style>
 </head>
 <body>
  <div class="lunbo">
   
  </div>
  <script type="text/javascript">
    var index = 1;
   function lunbo(){
    index ++ ;
    //判断number是否大于3
    if(index > 3){
     index = 1;
    }
    //获取img对象
  var img = document.getElementsByClassName("lunbo")[0];
  img.style.background = "url(pic/img"+index+".jpeg)";
  img.style.backgroundSize="100% 100%"; 
   }
   //2.定义定时器
   setInterval(lunbo,3000);
  </script>
 </body>
</html>

Js实现轮播图03

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

实现效果

HTML代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,
  minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <!--引入CSS代码-->
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
  <!--引入Js代码-->
  <script src="./js/index.js"></script>
  <title>Js实现轮播图</title>
 </head>
 <body>
  <div class="lunbo">
   <div class="content">
   <ul id="item">
    <li class="item">
     <a href="#" ><img src="img/pic1.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic2.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic3.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic4.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic5.jpg" ></a>
    </li>
   </ul>
   <div id="btn-left"><</div>
   <div id="btn-right">></div>
   <ul id="circle">
    
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
   </ul>
   </div>
  </div>
 </body>
</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<items.length;i++){ items[i].className="item"; circles[i].className="circle"; circles[i].setAttribute("num",i); } } /*只显示一个class*/ function move(){ clearclass(); items[index].className="item active"; circles[index].className="circle white"; } //点击右边按钮切换下一张图片 rightBtn.onclick=function(){ if(index<items.length-1){ index++; } else{ index=0; } move(); } //点击左边按钮切换上一张图片 leftBtn.onclick=function(){ if(index<items.length){ index--; } else{ index=items.length-1; } move(); } //开始定时器，点击右边按钮，实现轮播 timer=setInterval(function(){ rightBtn.onclick(); },1500) //点击圆点时，跳转到对应图片 for(var i=0;i<circles.length;i++){ circles[i].addEventListener("click",function(){ var point_index=this.getAttribute("num"); index=point_index; move(); }) } //鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动 content.onmouseover=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },3000) } //鼠标移出又开启定时器 content.onmouseleave=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },1500) } }

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

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

您可能感兴趣的文章:

  • 原生js实现轮播图的示例代码
  • js实现轮播图的完整代码
  • JS轮播图实现简单代码
  • 原生JS实现的自动轮播图功能详解
  • 简单的JS轮播图代码
  • 使用JavaScript实现轮播图效果完整实例