甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

使用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怎么实现一个轮播图功能-创新互联
    转载来于：http://chengdu.cdxwcx.cn/article/dhhddc.html

    其他资讯