                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /焦點(diǎn)圖輪播特效

該課程提供的源碼里有用jquery寫的方案，有一段不理解，望有人解惑

function animate (offset) {

? ? ? ? ? ? ? ? var left = parseInt(list.css('left')) + offset;

? ? ? ? ? ? ? ? if (offset>0) {

? ? ? ? ? ? ? ? ? ? offset = '+=' + offset;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? else {

? ? ? ? ? ? ? ? ? ? offset = '-=' + Math.abs(offset);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? list.animate({'left': offset}, 300, function () {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(left > -200){

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? list.css('left', -600 * len);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(left < (-600 * len)) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? list.css('left', -600);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? );

? ? ? ? ?}

慕粉2203123783

2018-01-16

源自：焦點(diǎn)圖輪播特效 3-1

關(guān)注問(wèn)題我要回答

1299

操作

收起

1 回答

這波很關(guān)鍵
2018-02-12

先解釋這兩行代碼：

offset = '+=' + offset;
和
offset = '-=' + Math.abs(offset);

在JavaScript里面，字符串+數(shù)字=字符串，( ?? ω ?? )

一開(kāi)始，該函數(shù)接收到的offset為一個(gè)值，+600或-600，

這里的if…else…就是讓offset變成字符串“+=600”或“-=600”

為什么呢？

jQuery 動(dòng)畫 - animate() 方法
語(yǔ)法：
$(selector).animate({params},speed,callback);
必需的 params 參數(shù)定義形成動(dòng)畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。

↑ 說(shuō)白了就是語(yǔ)法要求。

最后的兩個(gè)if判斷不用多說(shuō)吧，就是把圖片歸位，因?yàn)橐还灿衅邚垐D，其中第一張和最后一張都是假圖，

當(dāng)掃到第一張“假圖”時(shí)歸位成圖⑤（第六張），當(dāng)掃到最后一張“假圖”時(shí)歸位成圖①（第二張）。