js播放轮播图

简单的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进行绝对定位那么当浏览器窗口缩小时相应图片会出现流动的效果,这样的用户体验是十分糟糕的,所以在实现代码时切忌要将相应图标定位。自己在写这个轮播图的时候也会粗心大意忘记将图标定位,可能还是对盒子模型的有些知识点理解的不是很到位,所以在往后学习的同时也会继续巩固前面学到的内容

你可能感兴趣的:(js播放轮播图)