JavaScript如何实现轮播图效果

小编给大家分享一下JavaScript如何实现轮播图效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

创新互联公司专注于企业营销型网站建设、网站重做改版、姚安网站定制设计、自适应品牌网站建设、H5开发购物商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为姚安等各大城市提供网站开发制作服务。

HTML部分:




  
    
    轮播图
    
    
  
  
    
      
      
        轮播图1
        轮播图2
        轮播图3
        轮播图4
        轮播图5
        
      
        第1张
        
  • 第2张
  •         
  • 第3张
  •         
  • 第4张
  •         
  • 第5张
  •            
      

    CSS部分

    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .container{
      width: 600px;
      height: 400px;
      border: 4px double #FF6633;
      margin: 0 auto;
    }
    
    /* 轮播图 */
    .lbimg li{
      width: 100%;
      height: 350px;
      text-align: center;
      line-height: 350px;
      display: none;
      font-size: 25px;
      color: #FF6633;
    }
    .lbimg .on{
      display: block;
    }
    
    .btn{
      width: 100%;
      height: 50px;
      background-color: #3CBDFF;
      display: flex;
    }
    .btn li{
      flex: 1;
      color: #fff;
      font-weight: bold;
      line-height: 50px;
      text-align: center;
      font-family: "楷体";
      cursor: pointer;
      
    }
    .btn .active{
      background-color: rgba(0,0,0,0.2);
      transition: all ease-in-out 0.25s;
    }

    JavaScript部分

    window.onload=function(){
      var lbimg=document.querySelector(".lbimg");
      var lbimgs=lbimg.querySelectorAll("li");
      var btn=document.querySelector(".btn");
      var btns=btn.querySelectorAll("li");
      
      for (var i = 0; i < btns.length; i++) {
        
        btns[i].index=i;
        btns[i].onclick=function(){
          clearInterval(timer);
          for (var j = 0; j < lbimgs.length; j++) {
            lbimgs[j].className="";
          }
          // 按钮颜色跟着变化
          for(var k=0;k

    以上是“JavaScript如何实现轮播图效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


    当前题目:JavaScript如何实现轮播图效果
    分享URL:http://pwwzsj.com/article/ghecdo.html

    其他资讯