jQuery and CSS3实现一框3图滑动轮播特效，内附详细说明

以下所有代码都出自我手，贴出来是用于交流用，大家有更好的方法和改进，欢迎联系我哦。QQ2020108166

说明：额外引入的layui.css and layui.all.js都是用来写弹出层用的，如果大家嫌弃，就把弹出框那些干掉就行了，不会影响代码运行的。

最终效果：

<link rel="stylesheet" href="../lib/layer303/css/layui.css">

 

CSS:

 

.out-div {
  width:100%;
}
.out-div .cut-div {
  width:300px;
  overflow:hidden;
  border:1px solid red;
  margin:0 auto;
}

.out-div .cut-div .content-ul {
  width:auto;
  height:100px;
  white-space:nowrap;/*强制一行显示所有图片,字元素要设置为行内块inline-block,效果更佳*/
  /*把父框先向左边偏出去一张图的宽*/
  margin-left:-100px;
}

.out-div .cut-div .content-ul .img-li {
  position:relative;
  width:100px;
  height:100px;
  /*用行内块代替float*/
  display:inline-block;
  /*float:left;这里不要用float,滑动是可能会掉下去，或者不能强制到一行去*/
}
.out-div .cut-div .content-ul .img-li .desi-img{
  width:100px;
  max-height:100px;
}
.out-div .cut-div .content-ul  .img-li .img-no {
position:absolute;
  position: absolute;
  bottom: 25px;
  right: 43px;
  font-size: 30px;
  z-index: 2;
  color: red;
}
/*选中的要加个特效*/
.current-click{
  transform:scale(1.2,1.2);
  z-index:2;
  transition-duration: 0.8s;
}

/*清除浮动*/
.og-clearfixed:after{
    display:table;
    content:" ";
    clear:both;
    zoom:1;
}

html:

 

 

<div class="out-div">
  <div class="cut-div">
    <ul class="content-ul og-clearfixed">
      <li class="img-li">
        <img class="desi-img" src="../img/1.jpg"/>
        <span class="img-no">图1</span>
      </li>
    </ul>
  </div>
</div>

js:

要额外引入：

<script src="../lib/jquery-3.1.1.min.js"></script>

<script src="../lib/layer303/layui.all.js"></script>

 

 

/*
tangcc 20180119
* */
var arr1 = [1,2];//假设这是后台返回的img图片数组,因为是一个窗口展示三张图，所以一般最少要有3张，其它情况你们自己看着办，哈哈
var arr2 = [];//用来交换保存元素
    arr1.forEach(function (t, number, ts) {//给一个图片号码，看前端界面需要
      var str = "<li class=\"img-li\" data-myfeatureindex="+number+">" +
        "        <img class=\"desi-img\" src=\"../img/1.jpg\"/>" +
        "        <span class=\"img-no\">"+(number+1)+"</span>" +
        "      </li>";
      arr2.push(str);
    })
//判断是否少于3张，少于则居中
var str2 = "";//接收重新拼接html的字串
if(arr2.length >= 3){
  arr2 = (arr2.slice(arr2.length - 2)).concat(arr2);//重组代码，要保证滑动的效果要给开头预添加两张图片，因为要同时展示三张图
  arr2.forEach(function (t, number, ts) {
    str2 += t;
  })
  $(".content-ul").html(str2);//父容器渲染数据
  $(".content-ul .img-li:eq(2)").addClass("current-click");//给第一张加一个选中的效果，{transform:scale(1.2,1.2),transition-duration:1s;z-index:2;}
}else{
  arr2.forEach(function (t, number, ts) {
    str2 += t;
  })
  $(".content-ul").html(str2);//父容器渲染数据
  $(".content-ul")[0].style.cssText = "text-align:center;margin-left:0;";//处理样式预先偏左和让图片剧中
}

var clickFlag = true;//防止用户点得太快
$(".content-ul").on("click",".img-li",function (e) {
  if($(".content-ul .img-li").length < 5){//因为预加了两张图，所以length是5不是3
    $(this).addClass("current-click").siblings().removeClass("current-click");
    return false;
  }
  if(!clickFlag){
    layer.msg("对不起，小伙子你操作太快了,我跟不上呀",{time:1500,icon:5});
    return false;
  }
  clickFlag = false;
  e.stopPropagation();
  var perInterval = 100;//每张图的大小
  var theTransitionDuration = 0.5;//过渡时间
  var $this = $(this);
  var $thisParent = $this.parent();
  var _index = $this.index();//当前点击的元素索引
  var currentPickindex = $thisParent.children(".current-click").index();//scale元素的索引
  var maxLength = $thisParent.children().length;//父容器所含子图数（此处是li）
  if(_index == 2){//不能点中间那张
    clickFlag = true;
    layer.msg("亲，这个你可不能点哦,它已经放大了。",{time:1500,icon:5});
    return false;
  }else if(_index == (currentPickindex+1)){//往前点翻转
    $this.addClass("current-click").siblings().removeClass("current-click");
    var addDom = $thisParent.children().eq(_index-1).clone();
    $thisParent.append(addDom);
    //把第一个元素移除掉
    $thisParent.children().eq(0).queue(function(){
      $(this).css({"width":0+"px","transitionDuration":theTransitionDuration+"s"});
      $(this).dequeue();
    });
    setTimeout(function (){
        $thisParent.children().eq(0).remove();
        clickFlag = true;
      },theTransitionDuration*1000)
  }else if(_index == (currentPickindex -1)){//往后点翻转
    clickFlag = true;//打开这个开
    $thisParent.children().eq(maxLength-1).remove();//eq count from zero;
    var oppositeAddDom = $thisParent.children().eq(maxLength-3).clone();//克隆倒数第三个dom元素
    oppositeAddDom.css({"marginLeft":-perInterval+"px"});//这行很关键，一定是marginLeft,不能用width:0 再变大，因为会把其它元素挤下去，（我想了很久的，晕呀）
    $thisParent.prepend(oppositeAddDom);//将克隆的元素放到父级之前
    //var theWidth_$ThisParent = $thisParent.width();//行不通,别想着用改变width来实现，当然，哪天你实现了别忘记告诉我
    //$thisParent.children().eq(0).css({"marginLeft":0+"px","transitionDuration":theTransitionDuration+"s"});//行不通，因为切换太快了缺少滑动效果

    $thisParent.children().eq(0).animate({"marginLeft":0},theTransitionDuration*1000);//关键点：把新加在前面的元素先往左拉出去
    $this.addClass("current-click").siblings().removeClass("current-click");//在此处加transform:scale(1.2,1.2)样式(已经写在了css文件中了)
  }
})

最后，大家要努力学习，成为大神别忘了带我飞哟