轮播图写法详细汇总(原生JS+BootStrap+jQuery)+渐变轮播

最新推荐文章于 2022-02-27 15:52:42 发布

大鸡腿123

最新推荐文章于 2022-02-27 15:52:42 发布

阅读量461

点赞数

分类专栏： css jq js 文章标签： jquery javascript

本文链接：https://blog.csdn.net/yiersan__/article/details/107565864

版权

js 同时被 3 个专栏收录

14 篇文章 3 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

轮播图

原生JS写法
BootStrap
jQuery
渐变轮播

原生JS写法

轮播图主要包括三个功能：

自动循环播放
点击左右箭头换页
点击小圆相应的图显示

第一种：直接轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    
    <link rel="stylesheet" href="lunbo.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
    <div id="carousel">
        <!-- 轮播图片 -->
        <!-- 想要弄成循环，必须连贯起来，第5 张后是第1张 -->
        <div id="imglist" style="left: -800px;position:absolute;">
            <img src="img/5.jpg" alt="">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <img src="img/1.jpg" alt="">
        </div>
        <!-- 小圆点导航 -->
        <div id="nav">
            <ul id="myul">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 左右切换箭头 -->
        <script src="js/lunbo.js"></script>
        <span id="prev" class="	fa fa-angle-left"></span>
        <span id="next" class="	fa fa-angle-right"></span>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
/* 容器样式 */
#carousel{
    width: 800px;
    height: 400px;
    position: relative;
    margin: 0 auto;
    border: 4px solid #d4d1d1;
    overflow: hidden; /*将其他的图片隐藏*/
}
#imglist{  /*一定要对包含图片的容器做设置，宽度为所有图片的总和，才能使他们成一列排列 */
    position: absolute;
    width: 40000px;
    height: 400px;
}
/* 图片格式 */
#imglist img{
    /* 因为我的图片大小不一样，所以将它规定成容器大小 */
    width: 800px;
    height: 400px;
    float: left;
}

/* 导航 */
#nav ul{
    position: absolute;
    width: 100%;
    text-align: center;
    height: 15px;
    bottom: 40px;
}
#nav ul li{
    display: inline-block; 
    width: 15px;
    height: 15px;
    background-color: #efefef;
    border-radius: 50% 50%;
    cursor: pointer;
    margin: 0 7px;
}
#nav ul .active{
    background-color: #70899d;
}

/* 箭头 */
#prev,#next{
    cursor: pointer;
    display: block;
    position: absolute;
    font-size: 60px;
    top: 38%;
    width: 55px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    transition: color linear 0.2s,background-color linear 0.2s;
}
#prev{
    left: 0;
}
#next{
    right: 0;
}
#prev:hover{
    color: whitesmoke;
    background-color: #5757558a;
}
#next:hover{
    color: whitesmoke;
    background-color: #5757558a;
}

window.onload=function(){
    var carousel=document.getElementById("carousel");//获得容器
    var prev=document.getElementById("prev");
    var next=document.getElementById("next");//获得左右箭头
    var list=document.getElementById("imglist");//获得图片列表，现在list位置为-800px,显示第一张
    var points=document.getElementById("myul").getElementsByTagName("li");//获取导航图标，存为数组
    var index=1;//图标下标,目前是第一张
    var timer;//定时器

    // 点击左右箭头换页
    //当点击下一张时
    function movenext() {
        // 导航按钮变化
        if(index<5){//如果没有到达第5 张
            index++;
            list.style.left=parseInt(list.style.left)-800+"px";//下一张应该是上一张再次-800
            //一开始用的marginLeft控制，没有给list加定位，但发现到第五张时虽然能回到第一张，
            // 但marginLeft一直在增加，不会回到-800
        }
        else{//如果是第五张，那么返回第一张
            index=1;
            list.style.left=-800+"px";
        }
        for(var i=0;i<points.length;i++)
        {
            points[index-1].className='active';//把当前图标下标显示为蓝色
            if(i!=index-1)//把其他下标active属性消除
                points[i].className='';
        }  
    }
    next.onmousedown=function () {
        movenext();
    }
    //点击上一张时
    function moveprev() {
        if(index>1){//不在第一张
            index--;
            list.style.left=parseInt(list.style.left)+800+"px";
        }
        else{//如果现在是第一张，点击就到第五张
            index=5;
            list.style.left=-4000+"px";
        }
        for(var i=0;i<points.length;i++){
            points[index-1].className='active';//把当前图标下标显示为蓝色
            if(i!=index-1)//把其他下标active属性消除
                points[i].className='';
        }
    }
    prev.onmousedown=function(){
        moveprev();
    }

    //点击导航按钮换页
    for(var i=0;i<points.length;i++){
        points[i].index=i+1;//points[0]的index为1，points[4]的index为5
        points[i].onclick=function () {
            for(var j=0;j<points.length;j++){
                points[this.index-1].className='active';//把当前图标下标显示为蓝色
                if(j!=this.index-1)//把其他下标active属性消除
                    points[j].className='';
            }
            list.style.left=-800*this.index+"px";
            index=this.index;
        }
    }

    // 自动播放
    run();//一开始自动播放
    carousel.onmouseover=function () {//鼠标移入容器或在容器内移动
        clearInterval(timer);
    }
    carousel.onmouseout=function () {//鼠标离开
        run();
    }
    function run() {
        timer=setInterval(function () {
            movenext();//因为自动播放其实就是一直在循环点击下一张，所以我把函数封装起来了。
        },3000);
    }
}

在这里插入图片描述
第二种：左右过渡轮播

<div id="carousel">
        <!-- 轮播图片 -->
        <!-- 想要弄成循环，必须连贯起来，第5 张后是第1张 -->
        <div id="imglist" style="left: -800px;">
            <img src="img/5.jpg" alt="">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <img src="img/1.jpg" alt="">
        </div>
        <!-- 小圆点导航 -->
        <div id="nav">
            <ul id="myul">
                <li style="display: none;"></li>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li style="display: none;"></li>
            </ul>
        </div>
        <!-- 左右切换箭头 -->
        <script src="js/lunbo.js"></script>
        <span id="prev" class="	fa fa-angle-left"></span>
        <span id="next" class="	fa fa-angle-right"></span>
    </div>

css 和上面的一样

window.onload=function(){
    var carousel=document.getElementById("carousel");//获得容器
    var prev=document.getElementById("prev");
    var next=document.getElementById("next");//获得左右箭头
    var list=document.getElementById("imglist");//获得图片列表，现在list位置为-800px,显示第一张
    var points=document.getElementById("myul").getElementsByTagName("li");//获取导航图标，存为数组:0 1 2 3 4 5 6
    var imgs=list.getElementsByTagName("img");//获取图片数组：5 1 2 3 4 5 1 长度为7
    var index=1;//图标下标,目前是第一张，对照图片数组：index 取值为0 1 2 3 4 5 6
    var timer;//定时器

    // 点击左右箭头换页
    //当点击下一张时
    function movenext() {
        // 导航按钮变化
        if(index<6){//如果没有到达第6张即应该的第一张图片，要做到第五张和第一张的链接，先显示第六张，在变到第一张
            index++;
            list.style.transition="left 3s";
            list.style.left=parseInt(list.style.left)-800+"px";
            if(index==6){
                setTimeout(changetofirst,3000); 
                
                //由于到了最后一张图片，之前写的else就不能用了，
                //自动播放还是没问题，但如果一直点击下一张，到了第六张，只能再点击一次才能变到第一张，虽然图片没有变化，但
                //不连贯，所以把else部分封装起来，让他到第六张时，自动进行else部分，并加了定时器，和transition时间一样
                //看起来就没有差别，并且index=1不能放在这里，只能放在changeto函数中，否则当第六张图片没有完全显示时，
                //直接点击下一张，会造成很大空白，然后第一张显示，但points已经到了第二个了。
                //解释：index=1放这里，因为做了一个延时settimeout，点击下一张时延时没有结束，所以有空白，此时再次调用movenext
                //index++;index=2;第二个圆圈会变色，图片显示也会全乱
                //放在changeto函数，settimeout在延迟，即便一直点击下一张，index仍然=6，movenext函数基本没有用            
            }
            //list.style.left=parseInt(list.style.left)-800+"px";//下一张应该是上一张再次-800
            //一开始用的marginLeft控制，没有给list加定位，但发现到第五张时虽然能回到第一张，
            // 但marginLeft一直在增加，不会回到-800
        }
        for(var i=0;i<points.length;i++)
        {
            if(i!=index)//把其他下标active属性消除
                points[i].className='';
            points[index].className='active';//把当前图标下标显示为蓝色
            if(index==6){
                points[1].className='active';
            }
        }  

    }
    function changetofirst(){
        list.style.transition='';
        list.style.left=-800+"px";
        index=1;
    }
    next.onmousedown=function () {
        clearInterval(timer);
        movenext();
    }
    //点击上一张时
    function moveprev() {
        if(index>0){//不在第一张
            index--;
            list.style.left=parseInt(list.style.left)+800+"px";
            list.style.transition="left 3s";
            if(index==0){
                setTimeout(changetoend,3000);   
            }
        }
        for(var i=0;i<points.length;i++){
            if(i!=index)//把其他下标active属性消除
                points[i].className='';
            points[index].className='active';//把当前图标下标显示为蓝色
            if(index==0){
                points[5].className='active';
            }
        }
    }
    function changetoend(){
        list.style.transition='';
        list.style.left=-4000+"px"; 
        index=5;   
    }
    prev.onmousedown=function(){
        clearInterval(timer);
        moveprev();
    }

    //点击导航按钮换页
    for(var i=1;i<points.length-1;i++){//points,index:0 1 2 3 4 5 6 图片：5 1 2 3 4 5 1
        points[i].in=i;
        points[i].onclick=function () {
            index=this.in;
            // clearInterval(timer);
            for(var j=1;j<points.length-1;j++){
                points[this.in].className='active';//把当前图标下标显示为蓝色
                if(j!=this.in)//把其他下标active属性消除
                    points[j].className='';
            }
            list.style.left=-800*this.in+"px";
            list.style.transition="left 3s";
        }
    }

    // 自动播放
    document.addEventListener('visibilitychange',function(){
        
        if(document.hidden){
            clearInterval(timer);    //清除定时器
        } else {
            run(); //开启定时器
        }

    })//防止页面一离开，定时器还在继续，在切回来时，轮播图会快速移动刚刚离开时间应该移动的距离
    carousel.onmousemove=function () {//鼠标移入容器或在容器内移动
        clearInterval(timer);
    }
    carousel.onmouseout=function () {//鼠标离开
        run();
    }
    function run() {
        timer=setInterval(function () {
            movenext();//因为自动播放其实就是一直在循环点击下一张，所以我把函数封装起来了。
        },4000);
    }
}

拍的GIF图片太大，插不进来了。不知道之前那个怎么就行，麻烦。。

BootStrap

首先必须引入bootstrap组件：

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
 
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel{
      width: 70%;
  }
  .carousel-inner{
    width: 100%;
  }
  .carousel-inner img {
      width: 100%;
      height: 500px;
  }
  </style>
</head>
<body>

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/1.jpg">
    </div>
    <div class="carousel-item">
      <img src="img/2.jpg">
    </div>
    <div class="carousel-item">
      <img src="img/3.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

</body>
</html>

直接使用他所定义的类名就行，可以参考菜鸟教程：轮播图

jQuery

<div id="carousel">
        <!-- 轮播图片 -->
        <!-- 想要弄成循环，必须连贯起来，第5 张后是第1张 -->
        <div id="imglist">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <img src="img/1.jpg" alt="">
        </div>
        <!-- 小圆点导航 -->
        <div id="nav">
            <ul id="myul">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 左右切换箭头 -->
        <span id="prev" class="	fa fa-angle-left"><</span>
        <span id="next" class="	fa fa-angle-right">></span>
</div>

<script>
    $(function(){
        var index=0;//页码:0 1 2 3 4 5 图片分别为：1 2 3 4 5 1 长度：6
        var timer;//定时器
        var flag=true;
        var imgwidth=$("#imglist img").width();
        var len=$("#myul li").length;//真正图片个数：5 :0 1 2 3 4

        $("#next").on("click",function(){
            movenext();
        });
        function movenext(){
            
            //先判断是不是最后一张图片，index=0在第1张，index=4在第5张
            if(index==len)//到最后一张图片，第6张index=5
            {
                index=0;//跳转到第1张
                $("#imglist").css("left","0px");
            }
            index++;
            //index++能放在if条件之前吗？
            //可以，但需要改if条件，不然最后一张到第一张的过渡是瞬时的,并需要点击两次才能到第二张，可以自己试试
            $("#imglist").stop().animate({left: - index*imgwidth},2000);//先把其他动画停止，在进行左移动画

            //按钮颜色
            //因为是1 2 3 4 5 后面多了一张图片1，所以必须当index==len时，规定按钮样式
            //当index=4时，在第5张图片，这时小圆已经到了最后一个。点击下一张，index++=5,超出了小圆的范围
            //所以规定此时第0个小圆active
            if(index==len){    //eq() 方法返回带有被选元素的指定索引号的元素。
                $("#myul li").eq(0).addClass("active").siblings().removeClass("active");
            }
            else{
                $("#myul li").eq(index).addClass("active").siblings().removeClass("active");
            }
        }

        $("#prev").on("click",function(){
            if(index==0)//到第一张图片
            {
                index=len;//跳转到第6张，其实是第一张的图片
                $("#imglist").css({left: - index*imgwidth});
            }
            index--;
            $("#imglist").stop().animate({left: - index*imgwidth},2000);//先把其他动画停止，在进行左移动画
            //按钮颜色
            //为什么这个不用判断if呢？
            //试想现在在第一张图片index=0；点击上一张，先跳转index=5，是第6张图片，然后index--，index=4，是第5张，正好是我们想要的
            $("#myul li").eq(index).addClass("active").siblings().removeClass("active");
        });
        $("#myul li").on("click",function(){
            i=$(this).index();//获取当前按钮的索引：0 1 2 3 4
            clearInterval(timer);
            $("#imglist").stop().animate({left: - i*imgwidth},2000);//先把其他动画停止，在进行左移动画
            $(this).addClass("active").siblings().removeClass("active");
            index=i;
        });

        $("#carousel").hover(function(){//鼠标移入和移出
            clearInterval(timer);
        },function(){
            timer=setInterval(function(){
                movenext();
            },2000);
        });

    })
</script>

渐变轮播

<div id="carousel">
    <!-- 原理：图片都在同一个位置，第一张图片淡出，第二张图片显示，第二张图片淡出，第三张图片显示 -->
    <div id="imglist">
        <img src="img/1.jpg" alt="" style="z-index:5;">
        <img src="img/2.jpg" alt="" style="z-index:4;">
        <img src="img/3.jpg" alt="" style="z-index:3;">
        <img src="img/4.jpg" alt="" style="z-index:2;">
        <img src="img/5.jpg" alt="" style="z-index:1;">
    <!-- 需要把这几张图片position:absolute重叠到一个位置，但这样最后一张就跑到了第一张我们看到的位置，所以加了z-index -->
    </div>
</div>

<script>
    $(function(){
        var index=0;//页码:0 1 2 3 4 图片分别为：1 2 3 4 5 长度：5
        var timer;//定时器
        var imglength=$("#imglist img").length;

        timer=setInterval(function(){
            movenext();
        },2000);

        function movenext(){
            $("#imglist img").eq(index).fadeTo(2000,0);//这张图片渐出    
                   
            if(index==imglength-1)//当到达最后一张=4
            {
                index=0;
                $("#imglist img").each(function(){
                    $(this).animate({"opacity":"1"},2000);
                });
            }
            else{
                index++;
            }
            
        }
    })
</script>

在这里插入图片描述

大鸡腿123

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
轮播图写法详细汇总(原生JS+BootStrap+jQuery)+渐变轮播

轮播图原生JS写法BootStrapjQuery原生JS写法轮播图主要包括三个功能：自动循环播放点击左右箭头换页点击小圆相应的图显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫