JavaScript打造無縫切換

 

原文摘自我的前端博客，歡迎大家來訪問

http://hacke2.github.io/

起因

一年前寫管理學院的時候，那時候做首頁有一個幻燈片，由於之前沒交流好，CL寫的靜態頁面幻燈片圖片是在背景裏，讓我用jq寫， 當時就感覺特別啃爹，圖片寫在了css裏。。好坑爹，自己又懶得改，只能硬着頭皮用jq寫，一堆臨時變量，如num++，各種奇葩，最後加了 個jq淡隱淡出的效果，就交差了，，代碼如下：

function trim(s) { return s.replace(/^\s*/, "").replace(/\s*$/, ""); }   /** * 限制字數，第一個傳要限制的className，第二個傳限制的字數 * @author: wxl **/ function limitTextNum(className, num) { var limitNum = num; $("."+className+"").each(function () { var curText = $(this).text(); var curLength = $(this).text().length; if (curLength > num) { curText = $(this).text(curText.substring(0, limitNum) + '...'); } }); }   /** * 菜單摺疊 * @author: wxl **/ function initMenu() { $(".listArea").hide(); $('.listArea:first').show(); $('#dynamic_list .list_title').click( function () { var checkElement = $(this).next(); if ((checkElement.is('div')) && (checkElement.is(':visible'))) { return false; } if ((checkElement.is('div')) && (!checkElement.is(':visible'))) { $(this).children("div").children("a").css("background", "url(/Content/Images/Home/ico.PNG) no-repeat left center"); $('.listArea:visible').prev("div").children("div").children("a").css("background", "url(/Content/Images/Home/ico2.PNG) no-repeat left center"); $('.listArea:visible').slideUp('fast'); checkElement.slideDown('fast'); return false; } } ); }   /** *圖片翻滾 *@author wxl **/ function rollPictures() { var t = 0, count; var rollPics = $("#pictureArea div").slice(0, index.rollNewsPicsLength); count = rollPics.length - 1; rollPics.not(':first').hide(); $("#pageStyle .pageUp").click(function () { t--; if (t < 0) t = count; if (t == count) { $("#pictureArea div").eq(0).hide(); $("#pictureArea div").eq(t).fadeIn("slow"); } else { $("#pictureArea div").eq(t + 1).hide(); $("#pictureArea div").eq(t).fadeIn("slow"); }   }) $("#pageStyle .pageDown").click(function () { t++; if (t > count) t = 0; $("#pictureArea div").eq(t).fadeIn("slow"); if (t == 0) { $("#pictureArea div").eq(count).hide(); } else { $("#pictureArea div").eq(t - 1).hide(); }   }) //設一個定時器，每三秒翻滾圖片 setInterval(function () { $("#pageStyle .pageDown").click(); }, 5000) }

view rawcommon.js hosted with ❤ by GitHub

這幾天一個前端qq羣主分享了一個東西說平時可以練練手，我沒有做，可是看到他說，羣裏面有些人小東西不屑做，稍微大點有不會做 我當時就感覺說我。。剛纔寫了一下，與大家分享

思路

關鍵一點就是克隆,而且是深克隆，obj.clone(true);這樣就能克服該節點的所有子節點。之所以選擇克隆，是因爲直接刪除太突兀了。

一般無縫切換的幻燈片是這樣做的

1.點擊前一個：將最開始的節點克隆到最後一個節點後面，然後整體向前移，並且刪除掉第一個元素

2.點擊後一個：將最後節點克隆到最前面的節點錢，然後整體向後移，並且刪除掉最後一個元素

動畫效果用的智能社的動畫腳本

代碼

代碼在github上，有興趣的看下：

JavaScript打造無縫切換

查看完整DEMO

end

J