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

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许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。