原生js实现简单图片轮播效果+用bootstrap4框架实现轮播图对比

最新推荐文章于 2024-09-16 14:55:55 发布

帮窝消消黑眼圈

最新推荐文章于 2024-09-16 14:55:55 发布

阅读量1.3k

点赞数 1

分类专栏：前端基础文章标签：轮播图

本文链接：https://blog.csdn.net/weixin_43388844/article/details/84945803

版权

前端基础专栏收录该内容

25 篇文章 5 订阅

订阅专栏

原生js实现图片轮播

效果：
原生js
代码：

html+css：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图 练习</title>
<style>
.lunboimg {
  list-style-type: none;
}
.lbimg {
  position: absolute;
}
.lunbobtn {
  position: absolute;
  top: 75%;
  left: 40%
}
.lbbtn {
  margin-left: 10px;
  display: inline-block;
  background-color: gray;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.lbbtn:hover {
  width: 22px;
  height: 22px;
}
.rtriangle{
  margin-top: 50px;
  width: 0;
  height: 0;
  border-width:70px 40px;
  border-style: solid;
}
.righttriangle {
  position: absolute;
  top: 40%;
  left:78%;
  display: inline-block;
  border-right: 10px solid; border-bottom: 10px solid;
  width: 50px; height: 50px;
  transform: rotate(-45deg);
}
.righttriangle:hover {
  border-right: 12px solid yellow; border-bottom: 12px solid yellow;
}
.lefttriangle {
  position: absolute;
  top: 40%;
  left:17%;
  display: inline-block;
  border-left: 10px solid; border-bottom: 10px solid;
  width: 50px; height: 50px;
  transform: rotate(45deg);
}
.lefttriangle:hover {
  border-left: 12px solid yellow; border-bottom: 12px solid yellow;
}
</style>
</head>
<body>
  <div class="container">
    <ul class="lunboimg">
      <li class="lbimg">
        <a href="#"><img src="23.jpg" width="1000px" height="600px"></a>
      </li>
      <li class="lbimg">
        <a href="#"><img src="21.jpg" width="1000px" height="600px"></a>
      </li>
      <li class="lbimg">
        <a href="#"><img src="22.jpg" width="1000px" height="600px"></a>
      </li>
      <li class="lbimg">
        <a href="#"><img src="20.jpg" width="1000px" height="600px"></a>
      </li>
    </ul>
    <ul class="lunbobtn">
      <li class="lbbtn"></li>
      <li class="lbbtn"></li>
      <li class="lbbtn"></li>
      <li class="lbbtn"></li>
    </ul>
    <div class="rlbtn">
      <div id="rightbtn" class="righttriangle"></div>
      <div id="leftbtn" class="lefttriangle"></div>
    </div>
  </div>

<script src="test.js"></script>
</body>
</html>

js：

window.onload=function(){
    lunBo("lbimg","lbbtn");
}
    //轮播图函数
function lunBo(lbimg,lbbtn){
    var lbimgs=document.getElementsByClassName(lbimg);
    var lbbtns=document.getElementsByClassName(lbbtn);
    //图片及标识键设置函数（轮播到当前页面设置透明度为1，标识按钮设置为红色，其他页面隐藏）
    function initSet(index){
        for(var i=0;i<lbimgs.length;i++){
            lbimgs[i].style.opacity='0';
            lbbtns[i].style.backgroundColor='gray';
        }
        lbimgs[index].style.opacity='1';
        lbbtns[index].style.backgroundColor='blue';
    }
    //第一张图片初始化。（最开始时轮播到第一张图）
    initSet(0);
    //自动轮播函数
    var count=1;    //从第二张图开始轮播
    function autoMove(){
        if(count==lbimgs.length){
            count=0;
        }
        initSet(count);
        count++;
    }
    //设置自动轮播时间
    var scollMove=setInterval(autoMove,2000);
    //监听按钮控制跳转当前图片函数
    lbbtns[0].onclick=function(){
        clearInterval(scollMove);
        count=0;
        initSet(count);
        scollMove=setInterval(autoMove,2000);
    }
    lbbtns[1].onclick=function(){
        clearInterval(scollMove);
        count=1;
        initSet(count);
        scollMove=setInterval(autoMove,2000);
    }
    lbbtns[2].onclick=function(){
        clearInterval(scollMove);
        count=2;
        initSet(count);
        scollMove=setInterval(autoMove,2000);
    }
    lbbtns[3].onclick=function(){
        clearInterval(scollMove);
        count=3;
        initSet(count);
        scollMove=setInterval(autoMove,2000);
    }
    //监听左右控件实现前后跳转图片
    var rightbtn=document.getElementById("rightbtn");
    var lefttbtn=document.getElementById("leftbtn");
    rightbtn.onclick=function(){
        clearInterval(scollMove);
        autoMove();
        scollMove=setInterval(autoMove,2000);
    }
    leftbtn.onclick=function(){
        clearInterval(scollMove);
        if(count==0){
            count=lbimgs.length;
        }
        count--;
        initSet(count);
        scollMove=setInterval(autoMove,2000);
    };
}

bootstrap4实现图片轮播

效果：
bt4轮播
代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<title>轮播图 练习</title>
<style>
.carousel-inner img {
  width: 100%;
  height: 650px;
}
</style>
</head>
<body>
  <div class="container">
    <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>
        <li data-target="#demo" data-slide-to="3"></li>
      </ul>     
      <!-- 轮播图片 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="23.jpg">
          <div class="carousel-caption">
            <h3>Marvel</h3>
            <p>漫威标识！一些描述一些描述一些描述</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="21.jpg">
          <div class="carousel-caption">
            <h3>钢铁侠</h3>
            <p>一些描述一些描述一些描述一些描述</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="22.jpg">
          <div class="carousel-caption">
            <h3>雷神</h3>
            <p>一些描述一些描述一些描述一些描述</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="20.jpg">
          <div class="carousel-caption">
            <h3>灭霸</h3>
            <p>一些描述一些描述一些描述一些描述</p>
          </div>
        </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>
  </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
</html>

jquery实现图片轮播切换

效果：
jq实现
代码：（粘贴在这里太冗长，我打包在下面了）

对比

自己写轮播图效果的确很麻烦，但是可以锻炼一定的技能与熟练度，而且可以实现一些自定义效果（像是用jquery来写出如上例效果）。
当然用框架来写轮播图就方便多了，只是自定义效果不太好加，不过熟练之后用框架的确是省时间。

最后放一下轮播图的工程文件供跟我一样的初学者参考学习：

https://download.csdn.net/download/weixin_43388844/10841313

帮窝消消黑眼圈

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录