jQuery網(wǎng)頁特效任務驅(qū)動式教程-圖像輪播

JavaScript高級編程任務6圖像輪播圖像輪播任務6.1索引切換輪播任務6.2使用animate()實現(xiàn)無縫滾動輪播任務6.3使用CSS3動畫實現(xiàn)無縫滾動輪播任務6.4旋轉(zhuǎn)滾動輪播任務6.1索引切換輪播任務描述有6幅圖參與索引切換輪播，圖片文件名稱分別是lunbotu01.jpg-lunbotu06.jpg；輪播過程中，當鼠標指向圖片div時，停止輪播，鼠標離開時繼續(xù)輪播；鼠標指向圖片div時，能夠在兩側(cè)顯示向左和向右的箭頭，單擊向左箭頭，輪播的圖片向后退，單擊向右箭頭，輪播的圖片向前進，無論是后退還是前進，當鼠標離開圖片div時，將順著當前的索引繼續(xù)輪播；圖片前面設置索引標識，隨著圖片的切換，索引的狀態(tài)也在變化。任務6.1索引切換輪播任務實現(xiàn)-最簡單的索引切換輪播中不添加任何控制功能，輪播開始之后，只能不停的進行下去頁面中需要設計的元素在頁面中設置一個盒子divImg，盒子居中，寬度和高度根據(jù)要顯示的圖片確定在盒子divImg中設置一個圖片元素，當前顯示的圖片是參與輪播的第一幅圖腳本代碼定義全局變量i,并設置初值為第一幅圖的序號值1函數(shù)imgSwitch()定義：全局變量i增值判斷i的值是否超過最后一幅圖的序號值，若超過則將i值變換為1設置序號為i的圖片作為圖片區(qū)域中的內(nèi)容在函數(shù)外面使用循環(huán)定時器設置每間隔1秒鐘調(diào)用一次函數(shù)擴展索引切換輪播功能對索引切換輪播的功能擴展包括：停止和重啟輪播過程、后退和前進功能、跟隨變化的索引、單擊索引切換圖片第一，停止和重啟輪播過程鼠標指向圖片div時，結(jié)束循環(huán)定時器停止輪播鼠標離開圖片div時，重啟循環(huán)定時器繼續(xù)輪播功能分析：循環(huán)定時器返回的標識在鼠標指向和離開div時要執(zhí)行的函數(shù)中都要使用，因此需要將其定義為一個全局變量。定時器疊加問題及原因分析使用上面代碼控制輪播過程的停止和重啟之后，頁面剛開始運行時，若是將鼠標指針先指向divImg，等輪播開始之后再離開，存在著定時器疊加的問題，原因如下。初始時使用timer=setInterval(imgSwitch,1000)調(diào)用函數(shù)，程序運行后需要1秒鐘之后開始調(diào)用函數(shù)imgSwitch()。若是在imgSwitch()函數(shù)還未調(diào)用時將鼠標指針指向了divImg，此時的指向因為輪播沒有開始，不存在定時器標識timer，所以執(zhí)行代碼clearInterval(timer)是無效的，1秒鐘之后，會自動通過循環(huán)定時器啟用輪播，生成的定時器標識保存在timer中。輪播開始后將鼠標指針離開divImg時，會因為觸發(fā)mouseout事件而再次執(zhí)行代碼timer=setInterval(imgSwitch,1000)，之前生成的timer的值被當前生成的值替換，也就是輪播過程存在著疊加的兩個循環(huán)定時器在交叉控制著圖片切換，圖片切換的時間明顯變短，切換速度明顯變快。當鼠標再次執(zhí)行divImg時，只能停止第二次生成的定時器標識timer，第一次生成的定時器將無法通過clearInterval(timer)停止，輪播過程仍舊在繼續(xù)進行。定時器疊加問題的解決方案需要修改完善兩個函數(shù)的代碼修改停止輪播的函數(shù)，在停止定時器之后設置timer=null；修改重啟輪播的函數(shù)，重新使用定時器啟用輪播之前，先判斷timer是否是null，若是就重新啟用，否則不啟用。擴展索引切換輪播功能第二，跟隨變化的數(shù)字索引添加元素及樣式：需要在divImg內(nèi)部靠下的位置添加一個絕對定位的div，id為divInd，div的具體樣式要求為：寬度190像素、高度28像素，z軸取值為3（靠前），縱坐標bottom為20像素，橫坐標left為200像素；在div內(nèi)部使用橫向排列的塊元素span添加這些索引，通過設置float:left將span設置為橫向排列的塊元素，寬度和高度都是25像素，填充是0，邊距是1像素，邊框為藍色1像素實線，圓形效果，字號12pt，使用text-align:center設置文本的水平居中，使用line-height:25px設置文本的垂直居中，字體加粗，初始時為白底紅字，即背景色為白色，前景色為紅色；當前正在顯示的圖片的索引則使用選擇符#divInd>span.show{}設置為紅底白字的效果。初始設置第一個span引用show將divImg設置為相對定位修改腳本去掉所有span引用的show設置當前圖片所對應span引用樣式show擴展索引切換輪播功能第三，單擊數(shù)字索引切換圖片為數(shù)字索引元素添加樣式屬性cursor:pointer設置鼠標指針為手狀。功能說明：單擊span元素，將指定索引對應的圖片切換為divImg可視區(qū)域中顯示的圖片，之后則以該索引為起點計算接下來要顯示的圖片。定義span元素click事件函數(shù)，功能如下。獲取所單擊span元素的數(shù)字內(nèi)容，該數(shù)字內(nèi)容需要保存在全局變量i中，以保證顯示指定圖片之后能夠以該圖片作為起點繼續(xù)進行輪播；將變量i作為要顯示圖片的序號，設置img元素的src屬性取值；設置所有span元素移除類名show；為當前所單擊的span元素添加類名show。擴展索引切換輪播功能第四，后退和前進功能鼠標指向圖片div時，能夠在兩側(cè)顯示向左和向右的箭頭，單擊向左箭頭，輪播的圖片向后退，單擊向右箭頭，輪播的圖片向前進，無論是后退還是前進，當鼠標離開圖片div時，都將順著當前的索引繼續(xù)執(zhí)行輪播函數(shù)imgSwitch()。向左向右的兩個按鈕都直接使用div元素創(chuàng)建，寬度30像素，高度30像素，需要設置絕對定位，縱坐標大約在divImg垂直方向中間位置，根據(jù)divImg的高度454像素，確定縱坐標top取值為200px，向左箭頭（#toLeft）的橫坐標left取值為20像素，向右箭頭（#toRight）的橫坐標right取值為20像素，鼠標指針為手狀，初始狀態(tài)隱藏，鼠標指向divImg可視區(qū)域時顯示；向左按鈕的內(nèi)容是“<”，向右按鈕的內(nèi)容是“>”,字號2rem，白色加粗。擴展索引切換輪播功能第四，后退和前進功能點擊向左小箭頭當前圖像索引變量i減1，判斷若是0，則設置為最大索引設置索引為i的圖片為當前顯示的圖片；對顯示索引的所有span元素移除類名show對索引為i-1的span元素引用類名show。點擊向右小箭頭，重新調(diào)用函數(shù)imgSwitch()圖像輪播任務6.1索引切換輪播任務6.2使用animate()實現(xiàn)無縫滾動輪播任務6.3使用CSS3動畫實現(xiàn)無縫滾動輪播任務6.4旋轉(zhuǎn)滾動輪播使用animate()實現(xiàn)無縫滾動輪播任務描述輪播內(nèi)容以“大美中國”為主題，展示祖國的大好河山。共有7幅圖參與無縫滾動輪播，圖片文件名稱分別是image01.jpeg-image07.jpeg，每幅圖的下面都有一行介紹文本，跟隨圖片進行輪播替換；輪播過程中，當鼠標指向圖片div時，停止?jié)L動輪播過程，鼠標離開時繼續(xù)滾動輪播；鼠標指向圖片div時，能夠在兩側(cè)顯示向左和向右的箭頭，單擊向左箭頭，輪播的圖片向后滾動，單擊向右箭頭，輪播的圖片向前滾動，無論是后退還是前進，當鼠標離開圖片div時，將順著當前的索引繼續(xù)滾動；圖片下面設置索引標識，隨著圖片的切換，索引也跟隨變化。右圖是由最后一幅圖向第一幅圖無縫滾動輪播的過程效果實現(xiàn)簡單的無縫滾動輪播頁面元素結(jié)構(gòu)注意：圖片image01.jpeg出現(xiàn)的兩個位置實現(xiàn)簡單的無縫滾動輪播元素樣式說明輪播區(qū)域的上方是顯示“大美中國”標題的div，類名為divH，寬度與圖片寬度相同，640像素，高度50像素，邊距10像素，字號16pt，文本水平居中，文本行高50像素，字間距10像素，紅色加粗效果。輪播區(qū)域最外層的div，類名為divW，用于設置輪播圖的顯示區(qū)域，寬度與圖片相同，高度470像素，比圖片高度超出45像素，用于顯示圖片下方的文字；超出顯示區(qū)域之外的所有內(nèi)容必須要使用overflow:hidden設置為隱藏，另外，因為內(nèi)部的ul元素需要使用絕對定位，所以該div必須要設置為相對定位。實現(xiàn)簡單的無縫滾動輪播元素樣式說明divW內(nèi)部使用了無序列表ul中的列表項元素li來擺放參與輪播的所有圖片。ul的填充和邊距都需要設置為0，高度與divW高度相同，寬度比參與滾動輪播的圖片總寬度多出一張圖片的寬度，例如若每幅圖寬度為640像素，有7幅圖參與滾動輪播，則ul需要設置為8幅圖的寬度，即5120像素，這是因為第1幅圖要在最后再出現(xiàn)一次，即最后一幅圖和第1幅圖都是“image01.jpeg”，當滾動輪播顯示到最后一幅圖時，以“偷梁換柱”的方式將ul的橫坐標值切換為第1幅圖的橫坐標，以確保第1幅圖能夠與最后一幅圖無縫銜接起來。所謂滾動輪播實際上是通過腳本代碼控制改變ul的left坐標值，因此ul必須設置為絕對定位，依據(jù)相對定位的父元素divW來設置ul的left坐標值。實現(xiàn)簡單的無縫滾動輪播元素樣式說明li元素與圖片同寬同高，一個li中添加一幅圖和這幅圖的文字介紹，樣式設置中去掉列表符號和默認的填充邊距取值，設置向左浮動，將所有圖片像膠卷底片一樣連在一起。初始時設置ul的橫坐標和縱坐標都是0，在divW可視區(qū)域顯示第1幅圖圖片的寬度設置為640像素，高度設置為425像素，與圖片并列的段落元素，邊距設置為10像素，字號12pt，文本行高30像素，文本顏色為紅色。實現(xiàn)簡單的無縫滾動輪播實現(xiàn)原理若是初始時向左輪播，則ul的初始left坐標設置為0，此時第1幅圖位于divW的可視區(qū)域中，其它圖片都擺放在divW可視區(qū)域的右側(cè)，每向左移動一幅圖，left值就要在原來取值的基礎上減去圖片寬度；若第2幅圖位于divW可視區(qū)域中，則left坐標為初始的取值0減去圖片寬度640像素，得到-640像素；若第3幅圖位于divW可視區(qū)域中，則ul的left坐標為-640再減去640，得到-1280像素，以此類推。若是第8幅圖（最后的image01.jpeg）位于divW可視區(qū)域中，ul的left坐標為-4480px，此時需要將left坐標修改為0，通過這種方式將第1幅圖切換到divW的可視區(qū)域中，實現(xiàn)無縫滾動中首尾的無縫銜接過程。（三幅圖在左，四幅圖在右）實現(xiàn)簡單的無縫滾動輪播定義函數(shù)實現(xiàn)輪播-lunbo()通過判斷ul（DOM對象）的offsetLeft屬性取值是否是-4480（也可使用$("ul").css("left")=="-4480px"），判斷當前divW可視區(qū)域顯示的是否是最后一幅圖（指的是尾部增加的第1幅圖），若是，則將ul的left取值設置為0，重新定位到開始的第1幅圖。使用animate()方法設置ul的left坐標值在原來的基礎上減去圖像寬度640像素，坐標值的變化過程在1000毫秒內(nèi)完成，$("ul").animate({left:"-=640px"},1000);。在函數(shù)外面啟動循環(huán)定時器設置每間隔3秒鐘調(diào)用函數(shù)lunbo()，循環(huán)定時器要返回定時器標識，存放在全局變量timer中，為后面停止輪播過程做準備。無縫滾動輪播中的定時器時間設置思考問題假設將循環(huán)定時器的時間間隔設置為800毫秒，當滾動輪播進行最后一幅圖時（尾部名稱是image01.jpeg的圖片），會出現(xiàn)什么問題？為什么？問題解析在lunbo()函數(shù)開始添加代碼console.log($("ul")[0].offsetLeft)，該代碼的作用是，每次使用setInterval(lunbo,800)重新調(diào)用lunbo()函數(shù)時，都要輸出當前ul元素的橫坐標left取值，方便觀察結(jié)果。間隔時間改為3000再觀察輸出結(jié)果進行對比（640的倍數(shù)）循環(huán)定時器的時間間隔必須要大于animate()動畫需要的時間間隔擴展無縫滾動輪播功能對無縫滾動輪播的功能擴展包括三個方面：停止和重啟滾動輪播、前進和后退輪播圖片、添加跟隨圖片變化的索引停止和重啟滾動輪播鼠標指向div時，通過結(jié)束循環(huán)定時器停止無縫滾動輪播過程，設置全局變量timer為null。鼠標離開div時，判斷timer取值若是null則重啟循環(huán)定時器重啟無縫滾動輪播過程。擴展無縫滾動輪播功能跟隨變化的數(shù)字索引-元素設計實現(xiàn)跟隨變化的數(shù)字索引，需要在divW下方添加一個id為divInd的div，div的具體樣式要求為：寬度620像素、高度30像素，右填充20像素，邊距為0，字號10pt，字體加粗，文本向右對齊，文本行高30像素，顏色為紅色。在divInd內(nèi)部--和--之間使用span元素添加索引標識，初始時顯示第1幅圖，設置對應的索引值為“01”。擴展無縫滾動輪播功能跟隨變化的數(shù)字索引-修改腳本在lunbo()函數(shù)前面，定義表示圖片索引的全局變量i，初值為1，表示當前正在顯示的是第1幅圖，因為參與輪播的圖片一共有7幅，所以i的取值范圍為1~7。修改lunbo()函數(shù)。在函數(shù)體原有內(nèi)容最后面使用i++完成變量i增值；之后，判斷若i的值變?yōu)?，則將其重置為初始值1；設置divInd內(nèi)部span元素的文本內(nèi)容為字符“0”連接變量i的取值。擴展無縫滾動輪播功能后退和前進功能-元素設計鼠標指向圖片div時，能夠在兩側(cè)顯示向左和向右的箭頭，單擊向左箭頭，輪播的圖片向后退，單擊向右箭頭，輪播的圖片向前進，無論是后退還是前進，當鼠標離開圖片div時，都將順著當前的索引繼續(xù)執(zhí)行l(wèi)unbo()函數(shù)。向左向右的兩個按鈕都是divW中的button元素，樣式要求為：寬度30像素，高度30像素，需要設置絕對定位，縱坐標大約在圖片的垂直方向中間位置，根據(jù)divW中圖片的高度425像素，確定縱坐標top取值為200px，向左按鈕的橫坐標left取值為20像素，向右按鈕的橫坐標right取值為20像素，鼠標指針為手狀，初始狀態(tài)隱藏，鼠標指向divW可視區(qū)域時顯示；向左按鈕的內(nèi)容是“<”，向右按鈕的內(nèi)容是“>”,字號20pt，紅色加粗。擴展無縫滾動輪播功能后退和前進功能-腳本功能單擊“<”按鈕時，首先使用if(!$("ul").is(":animated"))判斷元素ul的animate()動畫是否正在進行中，如果滾動輪播過程正在進行，則不做任何操作；否則判斷ul的橫坐標left取值如果為0（即正在顯示的是第1幅圖），則將left坐標設置為-4480像素，重新定位到最后一幅圖。使用animate()方法設置ul的left坐標值在原來的基礎上加上圖像寬度640像素，坐標值的變化過程在1000毫秒內(nèi)完成，$("ul").animate({left:"+=640px"},1000);。將表示圖片元素索引的全局變量i的取值減去1，判斷i如果變?yōu)?，則恢復為最大索引值7；設置divInd內(nèi)部span元素的文本內(nèi)容為字符“0”連接變量i的取值。單擊“>”按鈕時，首先判斷元素ul的animate()動畫是否正在進行中，如果滾動輪播過程正在進行，則不做任何操作；否則直接調(diào)用函數(shù)lunbo()即可。擴展無縫滾動輪播功能后退和前進功能-思考問題如果去掉代碼中的判斷語句if(!$("ul").is(":animated"))，結(jié)果會怎樣？為什么？問題解析以單擊back按鈕為例說明，假設去掉$("#back").click(function(){…})中的判斷語句，根據(jù)代碼$("ul").animate({left:"+=640px"},1000)的設置，向右滾動640像素需要1秒鐘能夠執(zhí)行完畢，若是單擊按鈕“back”的速度太快，在沒有完成640像素的滾動過程時即啟用下一次的動畫過程，導致坐標的計算和判斷出現(xiàn)混亂，無法得到0坐標，條件if($("ul")[0].offsetLeft==0)無法成立，從而無法變回-4480像素，也就是第1幅圖和最后一幅圖不能實現(xiàn)無縫銜接，出現(xiàn)空白。圖像輪播任務6.1索引切換輪播任務6.2使用animate()實現(xiàn)無縫滾動輪播任務6.3使用CSS3動畫實現(xiàn)無縫滾動輪播任務6.4旋轉(zhuǎn)滾動輪播使用CSS3動畫實現(xiàn)無縫滾動輪播任務描述這里實現(xiàn)的無縫滾動輪播是

模仿京東商城網(wǎng)站“發(fā)現(xiàn)

好貨”模塊的輪播效果參與輪播的一共有14種商品，

輪播過程中，當鼠標指向圖片div時，停止?jié)L動輪播過程，鼠標離開時繼續(xù)滾動；底部的滾動條效果沒有使用div內(nèi)部的滾動條，而是使用絕對定位的div模擬的效果，在商品向左滾動的過程中，滾動條同時向右滾動。滾動條div初始時沒有顯示，當鼠標指向商品區(qū)域時，將滾動條從當前動畫的位置顯示出來，同時暫停滾動動畫效果。為了減少頁面元素的篇幅，所有商品信息都是用jQuery代碼以動態(tài)的方式加入的。使用CSS3動畫實現(xiàn)無縫滾動輪播頁面元素結(jié)構(gòu)下圖為添加兩種商品之后的元素結(jié)構(gòu)類名為fxhh的div，用作商品信息的顯示區(qū)域使用CSS3動畫實現(xiàn)無縫滾動輪播元素樣式divw樣式要求：寬度900像素，高度360像素，填充0，上下邊距10像素，左右邊距auto，背景色為白色，因為子元素scroll需要使用絕對定位，所以divw要設置為相對定位。fxhh的樣式要求：寬度900像素，高度354像素，邊框1像素實線灰色#ddd，因其子元素cont的寬度遠遠超出900像素，需要在fxhh給定的可視區(qū)域內(nèi)滾動，因此需要將非可視區(qū)域內(nèi)容設置為隱藏，又因為cont需要在fxhh內(nèi)部絕對定位，所以fxhh需要設置為相對定位?！咀⒁狻窟@里不能因為最外層的divw設置了相對定位，而省略fxhh的相對定位，這是因為設置非可視區(qū)域的隱藏效果是對fxhh進行的，overflow:hidden與position:relative需要同時使用，才能實現(xiàn)動畫效果。使用CSS3動畫實現(xiàn)無縫滾動輪播觀察問題如果只設置了divw的position:relative，沒有設置fxhh的relative，本該約束在可視區(qū)域內(nèi)部的cont商品信息，在可視區(qū)域外部都顯示出來了。使用CSS3動畫實現(xiàn)無縫滾動輪播觀察問題如果將.fxhh這層div去掉，直接在.divw內(nèi)部添加.cont元素，將divw設置為overflow:hidden并添加邊框樣式，將.scroll元素的bottom坐標設置為-5px（目的是讓divW的下邊框穿過滾動條元素），滾動條元素顯示效果如下圖所示，為什么？使用CSS3動畫實現(xiàn)無縫滾動輪播元素樣式類名為cont的商品信息div的樣式要求：高度350像素，填充0，絕對定位，橫坐標left和縱坐標top初始值都是0，使用user-select:none禁止用戶在頁面中通過拖動鼠標選中商品內(nèi)容，商品區(qū)使用animation引用名稱為cont-move的動畫，動畫每次完成需要20秒鐘，勻速無限重復進行；該div的寬度在腳本中進行計算并設置。商品信息區(qū)cont內(nèi)部使用div排列各種商品，div樣式要求：寬度280像素，高度350像素，上下填充0左右填充10像素（每種商品占據(jù)寬度300像素），向左浮動實現(xiàn)橫向排列；每種商品div的直接元素是一個段落和一個塊級超鏈接，段落的內(nèi)容是一個文本超鏈接，超鏈接熱點是商品名稱信息；而塊級超鏈接的內(nèi)容是圖像，圖像用于展示商品。使用CSS3動畫實現(xiàn)無縫滾動輪播元素樣式序號為偶數(shù)（從0開始）的商品，段落在上，超鏈接圖像在下，序號為奇數(shù)的商品，段落在下，超鏈接圖像在上（腳本實現(xiàn)）。段落樣式要求：寬度200像素，高度50像素，使用margin:0auto設置在div內(nèi)部居中，字號1rem，文本水平居中，文本行高50像素，使用“text-overflow:ellipsis;white-space:nowrap;overflow:hidden;”設置內(nèi)部的超鏈接顯示效果，如果超鏈接熱點超出200像素寬度，則對超出部分使用省略號取代。段落中的超鏈接樣式要求：沒有下劃線，黑色文本。圖像所在的塊級超鏈接樣式：沒有下劃線，邊框是0，使用display:block設置為塊級元素，寬度280像素，高度280像素。圖像的樣式要求：寬度280像素，高度280像素。使用CSS3動畫實現(xiàn)無縫滾動輪播元素樣式用作滾動條的類名為scroll的div，樣式要求：寬度60像素，高度10像素，背景淺灰色#ccc，圓角半徑10像素，在divw中絕對定位，初始橫坐標left取值為0，縱坐標bottom取值為0，也就是將scroll放在divw的底部，占據(jù)底部向上縱坐標0-9像素的位置，divw的高度是360像素，fxhh的高度是354像素，加上上下邊框2個像素之后，fxhh在divw中占據(jù)了356像素，而divw的高度是360像素，因此fxhh的下邊框位于divw中底部向上縱坐標為第5像素，這樣實現(xiàn)fxhh下邊框在滾動條scroll中間穿過的效果；初始狀態(tài)的隱藏使用visibility:hidden設置而不使用display:none設置，因為使用display:none設置了之后，元素相當于不存在，導致向右滾動的動畫將無法實現(xiàn)；該div引用名稱是scroll-move的動畫，動畫每次完成需要20秒鐘，勻速無限重復進行，動畫的關鍵幀定義：初始時橫坐標left是0，終止時橫坐標left設置為840像素（使用divw總寬度900像素減去scroll自身寬度60像素得到），這樣終止時，scroll滾動條右側(cè)邊與divw的右側(cè)邊重合。使用CSS3動畫實現(xiàn)無縫滾動輪播元素樣式動畫cont-move的關鍵幀定義：初始時橫坐標left是0，終止時橫坐標left設置為-4200像素（這是因為每種商品占據(jù)寬度300像素，共有14種商品，總寬度是4200像素）。當鼠標指向divw時要設置cont的cont-move動畫暫停，也要設置scroll的scroll-move動畫暫停和元素顯示。使用CSS3動畫實現(xiàn)無縫滾動輪播腳本功能定義一個二維數(shù)組，存放14種商品信息每種商品占寬300像素，要顯示14+3種商品，計算并設置.cont的寬度進行14次循環(huán)，在.cont>div中添加商品信息，生成段落內(nèi)容，生成超鏈接塊內(nèi)容，判斷如果索引是偶數(shù)，則先添加段落再添加超鏈接塊，奇數(shù)則反之，將div添加到cont中。再進行3次循環(huán)，完成上面操作使用CSS3動畫實現(xiàn)無縫滾動輪播觀察問題-1如果沒有使用最后3次循環(huán)添加第一到第三種商品，會如何？為什么？觀察問題-2去掉fxhh的relative觀察問題-3將.fxhh這層div去掉，直接在.divw內(nèi)部添加.cont元素，將divw設置為overflow:hidden并添加邊框樣式，將.scroll元素的bottom坐標設置為-5px圖像輪播任務6.1索引切換輪播任務6.2使用animate()實現(xiàn)無縫滾動輪播任務6.3使用CSS3動畫實現(xiàn)無縫滾動輪播任務6.4旋轉(zhuǎn)滾動輪播旋轉(zhuǎn)滾動輪播任務描述有6幅圖參與旋轉(zhuǎn)滾動輪播，圖片文件名稱分別是lunbotu01.jpg-lunbotu06.jpg，圖片自身的大小相同，都是寬730像素、高454像素；輪播過程中，每次有3幅圖顯示在前面，3幅圖中位于中間的圖片最大，顯示寬度為400像素，左右兩側(cè)的圖片略小一些，顯示寬度為200像素，另外3幅圖按照圖片索引順序堆疊在一起位于后面中間位置（如果有更多的圖片參與旋轉(zhuǎn)滾動輪播，最初時除了前3幅圖之外，其余圖片都疊放在后面中間位置），寬度為100像素。旋轉(zhuǎn)滾動輪播旋轉(zhuǎn)方向旋轉(zhuǎn)滾動輪播的方向：中間最大的圖片旋轉(zhuǎn)到左側(cè)，左側(cè)圖片旋轉(zhuǎn)到后面中間位置，默認排列在原有圖片的后面，后面中間位置圖片按照排列順序取出其中第1幅旋轉(zhuǎn)到前方右側(cè)，前方右側(cè)圖片旋轉(zhuǎn)到前方中間位置，如此循環(huán)往復。一共有6幅圖，旋轉(zhuǎn)6次之后，完成一輪旋轉(zhuǎn)滾動輪播。所以六次旋轉(zhuǎn)后回到初始的圖片布局狀態(tài)旋轉(zhuǎn)滾動輪播頁面元素結(jié)構(gòu)旋轉(zhuǎn)滾動輪播樣式定義位于前方的三幅圖的總寬度為800像素，中間和兩端還留有一定的空間，據(jù)此定義的存放所有圖片的divW元素寬度設置為1000像素，高度300像素，水平居中，淺灰色背景，相對定位。divW內(nèi)部使用絕對定位確定擺放圖片的四個位置，前面有左中右三個位置，類名分別為left、mid、right，垂直方向中線對齊，各自放一幅圖；后面中間定義一個位置，類名為back，與前面中間位置中心對齊，初始時除了前面3幅圖之外，所有圖都在此處疊起來，從左側(cè)滾入的圖片放在該位置，然后從該位置按序號取出一幅圖放在右邊，四個區(qū)域中該區(qū)域最小。類名為mid的元素樣式要求：寬度400像素，絕對定位，橫坐標left為300像素，縱坐標top為25像素，z軸坐標為2，置于前方。旋轉(zhuǎn)滾動輪播樣式定義類名為left的元素樣式要求：寬度200像素，絕對定位，橫坐標