不知道多久沒和她說話了，分手之后，除了時不時還能在群上看看她冒冒泡，我們已沒有正面交流，打開聊天窗口都會感到尷尬。突然有一天，她發微信給我，她說她要學前端開發。關於前端開發，我們之間還有段故事。那時候我們還沒開始交往，但我平時總會有意無意流露出一些喜歡她的暗示，她也領會到了，只是我從不表白，她也從不說破。有次期末，她找到我，讓我幫她做網頁設計課的課程設計。網頁設計算我半個專業，而她是學文學的，網頁設計只是選修課；且不說這是我擅長的，就憑她是我喜歡的女孩，我不會也得會，那次我發揮了我幾乎所有的創造力，此后我再也沒做出超過它的作品。她叫點，而我名字的拼音首字母是LD，所以我的網頁的主題索性就叫Love Dian；專門查閱網頁背景設計的一些資料，精心挑選的唯美背景，深色背景配上銀白色分割線；特地用jquery動畫做出全屏飄雪效果，每片雪花都用photoshop精心雕琢，把握效果還要把握圖片大小；從來只崇尚代碼的我，那次也用到了切片，用photoshop將武大一封著名的三行情詩做成動畫；精選的背景音樂，還有滾動歌詞；熒光筆鼠標；圖片遮罩效果；留言板模塊……我所學幾乎毫無保留全部用在了這次課設上，作品里也傾注了對她的愛慕之情，作品發給她的時候，我都沒注意到這有多大膽，心里只有圓滿完成女神交付的任務的成就感。那天晚上，點給我發QQ消息，說她很感動，但前不久她前男友主動提出復合，她答應了。我知道，我在作品里的流露有點過了，到了她不得不和我說破的時候了。我並沒有多驚訝，可能圓滿完成任務的成就感已經抵消了原本應該有的失落，心里很平靜（現在想想覺得自己的行為好賤），但還是傲嬌地說了句“我喜歡你是我的事，與你無關”。到真正追到她，是一年后的事情了，至於后來分手，也是諸多無奈。我畢業后做了一名會計，沒有從事IT方面的工作，這里面也有許多曲折，大概就是我敗給了自己，也敗給了生活。
兩周前她突然又發消息給我了，說要學網頁設計，我便自告奮勇地提出來教她，然而就講了一個下午，她便再沒找過我了。她說想學圖片輪播的做法，我當時沒做出來。后來我各種不甘心，專門花時間把圖片輪播給擼出來了。
用javascript做動畫，無非是將坐標一次移動n個像素，再用setInteral()做個循環將移動的動作連續起來，我的印象中這種動畫在動作的銜接點肯定會有卡頓，顯得不平滑，要做平滑連續的動畫，非要jquery的animate不可，於是我打算用jquery來做圖片滾動，當然我是在后來才發現這種想法不對的。
首先仍然是內容，一個div做容器，容器里面放幾張圖片，代碼就像下面這個樣子：
<div id="contianer"> <img class="_item" src="..." /> <img class="_item" src="..." /> <img class="_item" src="..." /> </div>
設定好容器container的寬度，溢出部分隱藏（overflow:hidden），圖片浮動屬性設置成靠左浮動(float:left)，做到這里我就碰到了我的第一個問題：container寬度多處的部分不足一個圖片的寬度，那container可見部分最右邊的圖片就會被隱藏而導致右邊有一片空白，就是下面這副死樣子：
為便於區別，容器是紅色邊框，圖片虛線邊框，上面應該顯示3張圖片，右邊應該顯示第3張圖片的一部分的，但是這樣做顯示不出來，顯然不能這樣，我就把容器的overflow:hidden去掉，成了下面這副樣子：
可以看到第三張圖片因空間不夠換到下一行了，浮動效果最初就是這么設定的，我要怎么才能做成下面這種效果呢？
我糾結了好久（簡直愚蠢）才想出這么個辦法，在容器里面再加一個子容器div，子容器寬度設置得比父容器款，圖片放在子容器里面，滑動的時候，讓子容器滑動，圖片也就跟着動了，就是這樣：
<style> #container { width:320px; border:solid 1px red; overflow:hidden; } #items { width:500%; position:relative; } ._item { border:dashed 1px; float:left; } </style> <div id="container"> <div id="items"> <img class="_item" src="images/1.ico" /> <img class="_item" src="images/2.ico" /> <img class="_item" src="images/3.ico" /> </div> </div>
子容器items的寬度設置成父容器的5倍（width:500%，其實也不用這么喪心病狂，只要比父容器寬就好了），這樣一來 ，第一個問題就解決了，接下來，要做動畫了。先不管別的，首先得讓子容器items左移動一個圖片寬度（我用的圖片是128px寬）的距離，在1秒內：
$("#items").animate({
left:"-=128px"
},
1000
);
注意，items的position必須設置成relative，屬性left才能生效，上述動畫才能生效。
OK，圖片能動了，要能實現輪播，需要在第一張圖片剛好完全向左移出可視區域的時候，馬上把該圖片移動到最右邊接到第3張圖片的后面，邏輯上是這樣的，但真正實現時，卻要借助其它邏輯：因為我們實際移動的是圖片的父容器items，不是直接移動的圖片。items已經左移128px，它可以繼續左移以讓圖片左移，但總有一個時間點要讓它回到最初的位置，不能讓它無限左移下去，我選擇在第一個圖片移出視野的時候讓items回歸原位；然后第一位置的圖片換成第二個位置的圖片，第二個位置的圖片換成第三個位置的圖片，原來第一個位置的圖片放到第三個位置，就是所有圖片換到它前面的一個位置上，然后第一張圖片換到最后一個位置上；這些動作在極短的時間內完成，看上去就像原來第一個圖片瞬間移動到了最后。然后，用setInterval讓上述所有動作按次序無線循環發生下去，就實現了圖片的輪播效果。
setInterval(_scroll,1000); function _scroll(){ $("#items").animate({ left:"-=128px" }, 1000, function(){ if(parseInt($(this).css("left")) <= -128){ $(this).css("left","0px"); var num = $("._item").length; var temp = $("._item").eq(0).attr("src"); for(var i = 0; i < (num - 1); i++) { $("._item").eq(i).attr("src",$("._item").eq(i+1).attr("src")); } $("._item").eq(num - 1).attr("src",temp); } } ); }
但，一秒卡頓一次，並不能連續平滑，寫到這里我基本放棄了。后來就查資料，發現，原來是我動畫單位時間設置成1000太長了，於是改成10，就是每10us移動130px，圖片就嘩嘩嘩差點閃花眼，再調，每10us移動5像素，就基本正常了，而且肉眼已經看不出有卡頓了！！！然后再把用變量speed將5px替換出來，以便於滾動速度，大功告成！！！
但是我已經基本沒可能挽回女神了！
附上代碼:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> #container { width: 500px; border: solid 1px; overflow: hidden; } #items { width: 1000px; position: relative; } ._item { float: left; } </style> <script src="js/jquery-2.1.1.min.js"></script> <script> $(document).ready(function(e) { var speed = 1;//數字越大速度越快 setInterval(_scroll,10);//延時設置一個比較小的數字十分重要，太高會出現卡頓 function _scroll(){ $("#items").animate({ left:"-=" + speed +"px" }, 10, function(){ var imgWidth = $("._item").eq(0).width(); //獲取單張圖片寬度 /*當某張圖片已經向左移出視野的時候*/ if(parseInt($(this).css("left")) + imgWidth <= 0){ $(this).css("left","0px"); var num = $("._item").length; console.log("元素個數：" + num); var temp = $("._item").eq(0).attr("src"); console.log("首個元素的src值：" + temp); for(var i = 0; i < (num - 1); i++) { $("._item").eq(i).attr("src",$("._item").eq(i+1).attr("src")); } $("._item").eq(num - 1).attr("src",temp); } } ); } }); </script> </head> <body> <div id="container"> <div id="items"> <img class="_item" src="images/1.ico" /> <img class="_item" src="images/2.ico" /> <img class="_item" src="images/3.ico" /> <img class="_item" src="images/4.ico" /> <img class="_item" src="images/5.ico" /> <img class="_item" src="images/6.ico" /> </div> </div> </body> </html>
我寫的這個並不是比較好的方案哦，比較好的方案，我是從網上找到的，也附在這里：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } --> </style> 向左滾動 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <script> <!-- var speed=10; //數字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script> </body> </html>