使用jQuery怎么实现一个轮播图功能-创新互联

今天就跟大家聊聊有关使用jQuery怎么实现一个轮播图功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

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

HTML代码




  
  
  
  Document
  


  
    
      
      
  •       
  •       
  •       
  •                                   
  •         
  •         
  •         
  •                                  

    山河

    一个人

    我眺望远方

            
            
              

    夕阳

    平静的湖水

    美丽不可方物

            
            
              

    沙漠

    广袤

    一往无前

            
            
              

    温泉

    游客

    魂牵梦绕

            
            
              

    大海

    一棵树

    紫气东来

            
          
        
      
         

    CSS代码

    *{
      padding: 0;
      margin: 0;
    }
    body{
      background: #000;
    }
    .banner{
      margin-left: 15%;
      width: 70%;
      position: relative;
    }
    .src{
      max-width: 100%;
    }
    .banner-img{
      list-style: none;
    }
    .banner-body{
      width: 100%;
      position: absolute;
      bottom: 0;
      background: #fff;
    }
    .banner-img>li{
      display: none;
    }
    .banner-img>.show{
      display: block;
      animation: opcaty 2s;
    }
    @keyframes opcaty {
      from{
        opacity: 0.2;
      }
      to {
        opacity: 1;
      }
    }
    .banner-body-img{
      margin: 5px;
      max-width: 60%;
      list-style: none;
    }
    .banner-body-img>li{
      display: inline-block;
      max-width: 18%;
    }
    .banner-body-img>.active{
      border-bottom: 2px solid #000;
      animation: left 2s;
    }
    @keyframes left {
      from{
        width : 0;
      }
      to{
        width: 100%
      }
    }
    .banner-text{
      width: 25%;
      position: absolute;
      bottom: 0;
      left: 70%;
      background: #493e56;
      color: #fff;
    }
    .banner-text>div{
      overflow:auto;
      width: 100%;
      margin: 10px;
      display: none;
    }
    .banner-text>.text-active{
      display: block;
    }
    .banner-text>div>p{
      margin: 10px 0px;
    }

    JS代码

    // 构建索引值
    var currIndex = 0;
    // 初始化点击事件
    initClick();
    function initClick() {
      $(".banner-img li").hover(function () {
        $(".banner-body").stop().slideUp();
        clearInterval(timer);
      },function () {
        timer = setInterval("banner()",3000);
        $(".banner-body").stop().slideDown();
      })
      $('#bannerUl li').click(function(){
        $(this).addClass("active");
        $(this).siblings().removeClass("active");
        $(".banner-img li").eq($(this).index()).addClass("show");
        $(".banner-img li").eq($(this).index()).siblings().removeClass("show");
        $(".banner-text div").eq($(this).index()).addClass("text-active");
        $(".banner-text div").eq($(this).index()).siblings().removeClass("text-active");
        currIndex = $(this).index();
        clearInterval(timer);
        timer = setInterval("banner()",3000);
      });
    }
    //构建定时器
    var timer = setInterval("banner()",3000);
    function banner() {
      if (currIndex > 3) {
        currIndex = 0;
      } else {
        currIndex ++;
      }
      $(".banner-img li").eq(currIndex).addClass("show");
      $(".banner-img li").eq(currIndex).siblings().removeClass("show");
      $("#bannerUl li").eq(currIndex).addClass("active");
      $("#bannerUl li").eq(currIndex).siblings().removeClass("active");
      $(".banner-text div").eq(currIndex).addClass("text-active");
      $(".banner-text div").eq(currIndex).siblings().removeClass("text-active");
    }

    看完上述内容,你们对使用jQuery怎么实现一个轮播图功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


    当前名称:使用jQuery怎么实现一个轮播图功能-创新互联
    当前URL:http://pwwzsj.com/article/dhhddc.html