寫功能的時候查了很多的demo。
各有好壞斥杜。
恰巧自己也是剛轉(zhuǎn)前端虱颗。索性摸索自己寫了一個。
項目要求的功能很多蔗喂、整理的時候把一些特殊功能都去掉了忘渔。
只留下輪播的效果。
效果如下:
-
核心代碼
.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
<div class="carousel">
<div class="img">
img/text等
</div>
<div class="img">
img/text等
</div>
</div>
盒子不一定非要用div畦粮、用ul、li啥的都一個樣。只要class設(shè)置成img就行锈玉。哪怕你懶得在這里設(shè)置爪飘、js里循環(huán)大盒子carousel去設(shè)置img也是一樣的义起。再或者carousel.li{...}設(shè)置拉背、總之只要給他動畫屬性就行了。都一個樣
之后默终、之后設(shè)定好各自圖片的位置class(img1/2/3/4/5)就好了
在對各自位置class進行重新分配的時候椅棺、會由class--img的動畫將其過渡到相應(yīng)的位置。
我們的需求是展示3張圖片齐蔽、所以我只寫了3個實體的位置class
反正自己需要啥樣的排版两疚、自己寫幾個class就行了
.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;
}
接下來。就交由js進行了
首先含滴。要給每個img添加相應(yīng)的唯一標(biāo)記诱渤、方便接下來獲取。
imgNub = $(".carousel .img").size();
//獲取輪播圖片數(shù)量
for(i=0;i<imgNub;i++){
$(".carousel .img:eq("+i+")").attr("imgId",i);
}
然后為相應(yīng)位置的img配置初始位置谈况。
我展示出來了3張勺美。img2在左、img3在中間碑韵、img4在右側(cè)赡茸。img1/5隱藏掉了。(如果你先展示出來5張祝闻、就再加個img0占卧、img6。都一個樣)
基本就是為了兼容各種數(shù)量的圖片联喘。給他們一個初始的位置华蜒。
嗯、截取一段意思意思豁遭。
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));
}
}
經(jīng)過以上半手動設(shè)置。每個img有了自己的位置class以及唯一的標(biāo)識id蜈抓。
接下來启绰、只要實現(xiàn)左右滑動就OK了。
//右滑動
function right(){
var fy = [];
//我們需要將原來的每個位置class沟使。依序放到數(shù)組里委可。
for(i=0;i<imgNub;i++){
//imgId最初設(shè)置的時候是0-X。取出相應(yīng)位置class的時候自然也是有序的
fy[i]=$(".carousel .img[imgId="+i+"]").attr("class");
}
for(i=0;i<imgNub;i++){
if(i==0){
//將最左邊圖移動到最右邊、實現(xiàn)輪播着倾。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();
}
最后就是左右兩張圖的點擊事件拾酝、每次移動之后刷一遍就行：
$(".carousel .img").removeAttr("onclick");
$(".carousel .img2").attr("onclick","left()");
$(".carousel .img4").attr("onclick","right()");
最后、雖然我為了易懂把一些與效果無關(guān)的代碼去掉了卡者。但關(guān)于一些其他功能還是可以說兩句蒿囤。
比如文字：
你完全可以在每個img的box里寫一個p。然后隱藏掉崇决。
在每次刷新完之后賦值給需要展示的p材诽。(其實點擊跳轉(zhuǎn)的事件也是一個道理、把img3--也就是屏幕中央的那個img的跳轉(zhuǎn)單獨打開就行了)
$('.list_title').html($('.img3').find(".li_title").text())
$('.list_text').html($('.img3').find(".li_text").text())
自動輪播:
更沒說的~加個定時器就行恒傻。
如果你要是干活脸侥、只想要一段代碼。前端效果插件網(wǎng)站上一搜一大片盈厘、各種功能各種樣式睁枕。
但是我看的都是萬變不離其宗、所以我也沒弄太多的功能上來沸手。
這個demo是我覺得能講清楚原理最簡化的demo了外遇。
