js实现轮播图效果的方法-创新互联

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

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

实现轮播图

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

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

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实现轮播图效果的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    当前题目:js实现轮播图效果的方法-创新互联
    本文来源:http://pwwzsj.com/article/dhpecs.html