带特效超链接的滚动轮播图

这段时间太忙，刚建的博客都没时间顾的上发文章，接下来发一个应老板要求，用boot和jquery写的一个滚动轮播图

下面是html代码

 <div class="container" id="kmd_shuffling" style="margin-top:300px">
    <div class="row">
      <div class="kmd_lunbo_left jddw">
        <span class="iconfont icon-xiangzuo1"></span>
      </div>
      <div class="kmd_lunbo_box jddw">
        <div class="kmd_lunbo_list xddw">
          <div class="kmd_lunbo_item">
            <div class="kmd_lunbo_bg">
              <a href="">
                <img src="./public/image/tlcq.jpg" alt="庭兰春秋"  class="img-responsive xddw"/>
              </a>
            </div>
            <p class="text-title-bgs xddw text-title-bg"></p>
            <p class='text-title  text-center xddw'>庭兰春秋</p>
            <p class="text-jj text-center xddw">网站定制&nbsp&nbsp&nbsp&nbsp响应式设计</p>
          </div>
          <div class="kmd_lunbo_item">
            <div class="kmd_lunbo_bg">
              <a href="">
                <img src="./public/image/hngydx.jpg" alt="河南工业大学"  class="img-responsive xddw"/>
              </a>
            </div>
            <p class="text-title-bgs xddw text-title-bg"></p>
            <p class='text-title  text-center xddw'>河南工业大学</p>
            <p class="text-jj text-center xddw">网站定制&nbsp&nbsp&nbsp&nbsp响应式设计</p>
          </div>
          <div class="kmd_lunbo_item">
            <div class="kmd_lunbo_bg">
              <a href="">
                <img src="./public/image/zzsdjmxy.jpg" alt="郑州晟达经贸管理学院"  class="img-responsive xddw"/>
              </a>
            </div>
            <p class="text-title-bgs xddw text-title-bg"></p>
            <p class='text-title  text-center xddw'>郑州晟达经贸管理学院</p>
            <p class="text-jj text-center xddw">网站定制&nbsp&nbsp&nbsp&nbsp响应式设计</p>
          </div>
          <div class="kmd_lunbo_item">
            <div class="kmd_lunbo_bg">
              <a href="">
                <img src="./public/image/avca.jpg" alt="ACVA"  class="img-responsive xddw"/>
              </a>
            </div>
            <p class="text-title-bgs xddw text-title-bg"></p>
            <p class='text-title  text-center xddw'>ACVA</p>
            <p class="text-jj text-center xddw">网站定制&nbsp&nbsp&nbsp&nbsp响应式设计</p>
          </div>
          <div class="kmd_lunbo_item">
            <div class="kmd_lunbo_bg">
              <a href="">
                <img src="./public/image/zzdl.jpg" alt="郑州电缆"  class="img-responsive xddw"/>
              </a>
            </div>
            <p class="text-title-bgs xddw text-title-bg"></p>
            <p class='text-title  text-center xddw'>郑州电缆</p>
            <p class="text-jj text-center xddw">网站定制&nbsp&nbsp&nbsp&nbsp响应式设计</p>
          </div>
          <div class="kmd_lunbo_item">
            <div class="kmd_lunbo_bg">
              <a href="">
                <img src="./public/image/abej.jpg" alt="艾本耳机"class="img-responsive xddw"/>
              </a>
            </div>
            <p class="text-title-bgs xddw text-title-bg"></p>
            <p class='text-title  text-center xddw'>艾本耳机</p>
            <p class="text-jj text-center xddw">网站定制&nbsp&nbsp&nbsp&nbsp响应式设计</p>
          </div>
        </div>
      </div>
      <div class="kmd_lunbo_right jddw">
        <span class="iconfont icon-xiangyou"></span>
      </div>
    </div>
  </div>

下面的是css

 .jddw{
 	position:absolute;
 }
 .xddw{
 	position: relative;
 }
  #kmd_shuffling .kmd_lunbo_box{
  overflow: hidden;
  white-space:nowrap;
  height:248px;
  width:1170px;
}
#kmd_shuffling .kmd_lunbo_list{
  height:248px;
  overflow: hidden;
  white-space:nowrap;
}
#kmd_shuffling .kmd_lunbo_item{
  width:390px;
  padding:0 10px;
  float: left;
  display: block;
  height:248px;
}
#kmd_shuffling .kmd_lunbo_item:hover .img-responsive{
  transform:scale(1.2);
}
#kmd_shuffling .kmd_lunbo_active{
  background:rgba(0,0,0,.5)
}
#kmd_shuffling .img-responsive{
  z-index: -1;
  transition:all .5s linear;
}
#kmd_shuffling .kmd_lunbo_bg{
  width: 370px;
  height: 248px;
  overflow: hidden;
  /* transition:all .s linear; */
}
#kmd_shuffling .text-title-bg{
  background:rgba(0,0,0,.5);
}
#kmd_shuffling .text-title-bgs{
  height:30px;
  line-height:30px;
  bottom:30px; 
}
#kmd_shuffling .text-title{
  height:30px;
  width:80%;
  line-height:30px;
  margin:0 auto;
  bottom:60px;
  color:#fff;
  transition:all .5s linear;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#kmd_shuffling .text-jj{
  color:#fff;
  bottom:0px;
  transition:all .5s linear;
}
.kmd_lunbo_left{
  left:110px;
  bottom:50%;
}
.kmd_lunbo_right{
  right:110px;
  bottom:50%;
}
.kmd_lunbo_left span,.kmd_lunbo_right span{
  font-size:60px;
  opacity: .5;
}

下面就是jquery代码了

  $(function(){
    //获取item的宽度
    var itemwidth=$('.kmd_lunbo_item').width();
    //获取item的数量
    var itemnub=$('.kmd_lunbo_list').children(["选择器"]).length;
    //给item的父元素加宽度
    $('.kmd_lunbo_list').css('width',[itemwidth*itemnub+'px']);
    $('.kmd_lunbo_right').on('click','.icon-xiangyou',function(){
        var offset=($('.kmd_lunbo_item').width())*-1;
        $('.kmd_lunbo_list').stop().animate({left:offset},function(){
          var firstItem = $(".kmd_lunbo_item").first();
          $('.kmd_lunbo_list').append(firstItem);
          $('.kmd_lunbo_list').css("left","0px");
        })
    });
    $('.kmd_lunbo_left').on('click','.icon-xiangzuo1',function(){
      var lastItem = $(".kmd_lunbo_item").last();
      $('.kmd_lunbo_list').prepend(lastItem);
      var offset=($('.kmd_lunbo_item').width())*-1;
      $('.kmd_lunbo_list').css('left',offset);
      $('.kmd_lunbo_list').animate({left:"0px"},function(){
        console.log(1);
      })
    })
  })

希望能帮到大家，写的不好也请大家不要喷我