我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

js实现轮播图效果的方法

这篇文章给大家分享的是有关js实现轮播图效果的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站是一家专注于网站建设、成都网站设计与策划设计,彭泽网站建设哪家好?创新互联建站做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:彭泽等地区。彭泽做网站价格咨询:13518219792

实现轮播图

学习前端差不多两三个月,在这里记录分享一下。因本人菜鸟一枚,希望大佬们多多指点,勿喷。

通过计算每一张图片高度实现滑动轮播图

HTML代码:


 
 
  
  •   
  •    
  •    
  •    
  •      
     
        <    >

    CSS代码:

    * {
     transition: all 1s;
     margin: 0px;
     padding: 0px;
    }
    
    .fate {
     position: absolute;
     top: 0%;
     width: 512px;
     height: 512px;
     overflow: hidden;
    }
    
    ul li {
     list-style: none;
    }
    .lancer{
     position: absolute;
     top: 0%;
     width: 100%;
     height: 100%;
    }
    .saber {
     top: 0px;
     position: absolute;
    }
    .archer{
     position: absolute;
    }
    button {
     z-index: 99;
    }

    JS代码:

    var index=0;
    function godown(){
      var li = document.getElementsByTagName("li");
     //获取单个li宽度(单张图片高度)
     var liHeight = li[0].scrollHeight;
      
     var goup=document.getElementsByClassName("goup");
     var lancer=document.getElementsByClassName("lancer")[0];
     if(index<4){
      index++;
      }else{
        index=0;
      }
      lancer.style.top = -index*liHeight+"px";
      }
    function goup(){
     var li = document.getElementsByTagName("li");
      //获取单个li宽度(单张图片高度)
      var liHeight = li[0].scrollHeight;
      
      var goup=document.getElementsByClassName("goup");
      var lancer=document.getElementsByClassName("lancer")[0];
      if(index>0){
       index--;
      }else{
      index=4;
     }
     lancer.style.top = -index*liHeight+"px";
    }

    如有错误望指出。

    利用z-index实现轮播图
    HTML代码

    
        
          
                                                         
                   >     <

    CSS代码

    li {
          list-style: none;
        }
        
        .archer {
          position: absolute;
          top: 0%;
          display: none;
        }
        
        .active {
          display: block;
        }
        
        button {
          position: absolute;
          top: 70%;
          width: 50px;
        }
        
        #goup {
          left: 400px;
        }
        
        #godown {
          left: 0px;
        }

    JS代码

    var pic = document.getElementsByTagName("li");
        var archer = document.getElementsByClassName("archer");
        var goup = document.getElementById("goup");
        var godown = document.getElementById("godown");
        var index = 0;
        goup.onclick = function() {
          for (var i = 0; i < pic.length; i++) {
            pic[i].className = "archer";
          }
          if (index < 4) {
            index++;
          } else {
            index = 0;
          }
          pic[index].className = "active";
    
        }
        godown.onclick = function() {
          for (var i = 0; i < pic.length; i++) {
            pic[i].className = "archer";
          }
          if (index > 0) {
            index--;
          } else {
            index = 4;
          }
          pic[index].className = "active";
    
        }

    利用index来实现轮播,但是生硬。

    感谢各位的阅读!关于“js实现轮播图效果的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


    网站名称:js实现轮播图效果的方法
    标题URL:http://mswzjz.cn/article/psiooe.html

    其他资讯