• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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)
}
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue+ts实现元素鼠标拖动效果发布时间:2022-02-05
下一篇:
JavaScript实现弹性导航效果发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap