js播放轮播图

最新推荐文章于 2022-08-16 22:33:39 发布

大佳a

最新推荐文章于 2022-08-16 22:33:39 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/weixin_45691337/article/details/102856612

版权

简单的js轮播图
轮播图在制作网页方面是一个比较重要的内容，轮播图有很多方法去实现，最简单的是通过Bootstrap框架来实现，这里主要针对还没学习框架只是使用js+html+css来实现轮播图自动播放。
这里还是参照成都大学教务系统的轮播图来说明如何使用js制作轮播图
在这里插入图片描述
轮播图要实现的功能：1.轮播图能自动播放 2.左右两边有箭头按钮，点击能切换图片 3.图片下方有小圆点图标，图片滑动圆点会跳到相应的图片页，并且点击小圆点能切换到相应图片页。
下面是代码部分：
html代码：

<body>
      <div class="wrap">
        <ul class="list">
          <li class="item active"><img src="图片/1p.jpg"></li>
          <li class="item"><img src="图片/2p.jpg"></li>
          <li class="item"><img src="图片/3p.jpg"></li>
          <li class="item"><img src="图片/4p.jpg"></li>
          <li class="item"><img src="图片/5p.jpg"></li>
        </ul>
        <ul class="pointList">
          <li class="point active" data-index='0'></li><!--在标签里存入数据  -->
          <li class="point" data-index='1'></li>
          <li class="point" data-index='2'></li>
          <li class="point" data-index='3'></li>
          <li class="point" data-index='4'></li>
        </ul>
        <button type="button" class="btn" id="goPre" onclick="goPre()"><</button>
        <button type="button" class="btn" id="goNext" onclick="goNext()">></button>
      </div>

CSS代码：

.wrap{
           width:800px;
           height:400px;
           position:relative;
         }
         .list{
           width:800px;
           height:400px;
           list-style:none;
           position: relative; 
           padding-left: 0px;
         }
         .item{
           width:100%;/*继承list的宽度*/
           height: 100%;
           position: absolute; 
           opacity: 0;
           transition:all .5s;
         }
         .btn{
           width:50px;
           height:100px;
           position:absolute;
           top:150px;
           z-index: 100;
           cursor: pointer;
         }
         /* 左图标 */
         #goPre{
           left:0px;
         }
         /* 右图标 */
         #goNext{
           right:0px;
         }
         /* 图片大小 */
         img{
           width:800px;
           height:400px;
         }
         /* 控制显示图片*/
         .item.active{
           z-index: 10;
           opacity: 1;
         }
         
         .pointList{
           padding-left: 0px;
           list-style-type: none;
           position:absolute;
           right:20px;
           bottom: 20px;
           z-index: 1000;
         }/* 设置圆点图标的相应属性 */
         .point{
           width:10px;
           height:10px;
           background-color: rgba(0,0,0,0.4);
           border-radius: 100%;
           float:left;
           margin-right: 20px;
           border-style: solid;
           border-width: 2px;
           border-color:#312f2f99;
           cursor: pointer;
         }
         .point.active{
          border-color:hsla(0, 59%, 58%, 0.952)
         }

js代码：

var items=document.getElementsByClassName("item");
        var points=document.getElementsByClassName("point");
        var index=0;//index表示第几张图片在展示
        //  清除函数
        var clearActive=function(){
          for(var i=0;i<items.length;i++){
            items[i].className="item";
          }
          for(var i=0;i<points.length;i++){
            points[i].className="point";
          }
        }
        var goIndex=function(){
          clearActive();
          points[index].className="point active";
          items[index].className="item active";
        }
        // 切换下一张图片
        var goNext=function(){
          if(index<4){
          index++;
          }else{
            index=0;
          }
          goIndex();
        }
      //  切换上一张图片
        var goPre=function(){
          if(index==0){
            index=4;
          }else{
            index--;
          }
          goIndex();
        }
        // 点击圆点切换相应图片
         for(var i=0;i<points.length;i++){
           points[i].addEventListener('click',function(){
             var  pointIndex=this.getAttribute("data-index");
             index=pointIndex;
             goIndex();
           })
         }
        // 图片自动播放
        var time=0;
         setInterval(function(){
           time++;
           if(time==20){
             goNext();
             time=0;
           }
         },100)

总结：这个轮播图的实现不仅需要熟练掌握并正确使用js相关函数及事件，还要熟练使用position属性来对相关的按钮进行布局，如果不使用absolute进行绝对定位那么当浏览器窗口缩小时相应图片会出现流动的效果，这样的用户体验是十分糟糕的，所以在实现代码时切忌要将相应图标定位。自己在写这个轮播图的时候也会粗心大意忘记将图标定位，可能还是对盒子模型的有些知识点理解的不是很到位，所以在往后学习的同时也会继续巩固前面学到的内容

大佳a

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js播放轮播图

简单的js轮播图轮播图在制作网页方面是一个比较重要的内容，轮播图有很多方法去实现，最简单的是通过Bootstrap框架来实现，这里主要针对还没学习框架只是使用js+html+css来实现轮播图自动播放。这里还是参照成都大学教务系统的轮播图来说明如何使用js制作轮播图轮播图要实现的功能：1.轮播图能自动播放 2.左右两边有箭头按钮，点击能切换图片 3.图片下方有小圆点图标，图片滑动圆点会跳到...
复制链接

扫一扫

js播放轮播图

“相关推荐”对你有帮助么？