[AppleScript] 纯文本查看 复制代码
.carousel .img{ overflow: hidden; position: absolute; transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
}
轮播的时候图片移动和缩放、归功于class---img
[AppleScript] 纯文本查看 复制代码
<div class="carousel"> <!-- 轮播图片数量可变 -->
<div class="img">
img/text等 </div>
<div class="img">
img/text等 </div>
</div>
盒子不一定非要用div、用ul、li啥的都一个样。只要class设置成img就行。哪怕你懒得在这里设置、js里循环大盒子carousel去设置img也是一样的。再或者carousel.li{...}设置、总之只要给他动画属性就行了。都一个样
之后、之后设定好各自图片的位置class(img1/2/3/4/5)就好了
在对各自位置class进行重新分配的时候、会由class--img的动画将其过渡到相应的位置。
我们的需求是展示3张图片、所以我只写了3个实体的位置class反正自己需要啥样的排版、自己写几个class就行了
[AppleScript] 纯文本查看 复制代码
.slide .img1{ width: 0px; height: 0px; top: 30%; left: -50%; z-index: 1;
}.slide .img2{ width: 500px; height: 200px; top: 20%; left: -20%; z-index: 2;
}.slide .img3{ width: 840px; height: 340px; top: 10%; left: 15%; z-index: 3;
}.slide .img4{ width: 500px; height: 200px; top: 20%; left: 60%; z-index: 2;
}
.slide .img5{ width: 0px; height: 0px; top: 30%; left: 110%; z-index: 1;
}
[AppleScript] 纯文本查看 复制代码
imgNub = $(".carousel .img").size();
//获取轮播图片数量
for(i=0;i<imgNub;i++){
$(".carousel .img:eq("+i+")").attr("imgId",i);
}
然后为相应位置的img配置初始位置。
我展示出来了3张。img2在左、img3在中间、img4在右侧。img1/5隐藏掉了。(如果你先展示出来5张、就再加个img0、img6。都一个样)
基本就是为了兼容各种数量的图片。给他们一个初始的位置。
嗯、截取一段意思意思。
[AppleScript] 纯文本查看 复制代码
if(imgNub>3&&imgNub<6){ //img 1、2、3、4、(5)
for(i=0;i<imgNub;i++){
$(".carousel .img:eq("+i+")").addClass("img"+(i+1));
}
}
经过以上半手动设置。每个img有了自己的位置class以及唯一的标识id。接下来、只要实现左右滑动就OK了。
[AppleScript] 纯文本查看 复制代码
//右滑动function right(){ var fy = []; //我们需要将原来的每个位置class。依序放到数组里。
for(i=0;i<imgNub;i++){ //imgId最初设置的时候是0-X。取出相应位置class的时候自然也是有序的
fy=$(".carousel .img[imgId="+i+"]").attr("class");
} for(i=0;i<imgNub;i++){ if(i==0){ //将最左边图移动到最右边、实现轮播。0->5
$(".carousel .img[imgId="+i+"]").attr("class",fy[imgNub-1]);
}else{ //其他依次后(左)移:1->0 2->1....
$(".carousel .img[imgId="+i+"]").attr("class",fy[i-1]);
}
}
imgClicked();
}
最后就是左右两张图的点击事件、每次移动之后刷一遍就行：
[AppleScript] 纯文本查看 复制代码
$(".carousel .img").removeAttr("onclick");$(".carousel .img2").attr("onclick","left()");$(".carousel .img4").attr("onclick","right()");
