JS实现轮播图的三种简单方法

标签：index 轮播 img 100% JS 三种 lunbo var

01、JS轮播图实现1

实现思路
这可能是轮播图最简单点的实现之一，通过更改图片的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>

02、JS轮播图实现2

实现思路这可能是轮播图最简单点的实现之一，通过改变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>

03、JS轮播图实现3

本轮播图的实现，首先通过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实现轮播图的三种简单方法。_念你那丝微笑的博客-CSDN博客_js轮播图

标签：index,轮播,img,100%,JS,三种,lunbo,var
From： https://www.cnblogs.com/zhaostudy/p/16897187.html

JS实现轮播图的三种简单方法

01、JS轮播图实现1

02、JS轮播图实现2

03、JS轮播图实现3

相关文章

赞助商

阅读排行