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>
/* 欧工国际软装“智能展厅项目”,源码开放,大家觉得好给个赞哦,哈哈哈哈,觉得哪里写得不好请联系我QQ2020108166 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文件中了) } })最后,大家要努力学习,成为大神别忘了带我飞哟