-
getElementsByClassName返回的是一個數(shù)組，要指定下標，所以next，prev指定Id屬性，添加onclick事件，才能獲取style.left查看全部
-
圓點按鈕切換 ①通過for循環(huán)便利圓點，添加點擊事件 ②點擊按鈕時，取到index值，就可以知道當前點擊的是第幾個按鈕，要顯示第幾張圖片 ③通過DOM2級方法getAttribute獲取到自定義（或自帶）屬性，為了計算再轉(zhuǎn)換為數(shù)字 ④通過新的值減去舊的值獲取偏移量 ⑤寫一個判斷，當這張圖片是打開狀態(tài)的，就什么都不做，用class=on來判斷是否打開，return跳出，后面的代碼不會再執(zhí)行查看全部
-
無限滾動：彌補左右鍵切換的空白 ①當前面的附屬圖比第一張大，最后一張附屬圖比最后一張小的時候，出現(xiàn)這兩種情況時讓它復(fù)位到真正的第一張或第五張圖 ②判斷是否滾到了輔助圖上，滾到了讓它歸位 ③把常用的list.style.left，存到一個變量中，方便使用 ④添加圓點的切換功能，創(chuàng)建一個變量來承載當前存儲的第幾張圖片/顯示第個圓點 ⑤寫一個函數(shù)，用來顯示亮起小圓點的功能 ⑥圓點是數(shù)組，所以創(chuàng)建的變量要減去1才能對應(yīng)上要顯示的圓點，讓它亮起來添加class名（樣式） ⑦再綁定事件中左箭頭index要加一，右箭頭要減一，調(diào)用圓點函數(shù)讓它點擊時顯示，每次點擊箭頭的時候都要改變index的值，使它對應(yīng)到正確的圖片上，調(diào)用showButton亮起對應(yīng)的圓點 ⑧亮起自己的同時，讓其他不亮，使用for循環(huán)，去掉所有的class，然后break退出循環(huán)，不再繼續(xù)便利元素節(jié)點 ⑨箭頭點擊時，當圓點index大于5時，讓它歸位為1，小于1時，歸位為5，不到5時加一查看全部
-
JS實現(xiàn)箭頭切換 ①整個頁面加載完成后window.onload，獲取元素，這樣才能真正的獲取元素 ②通過ID名獲取頁面中的元素（最大容器、承載圖片容器、圓點列表、箭頭），賦值給一個變量 ③添加一個時間綁定，點擊箭頭時實現(xiàn)圖片的切換 ④當點擊右箭頭時，改變left的值，它要像左移動，所以要減去一張圖的寬度 ⑤獲取圖片容器的值，list.style.left = 自身的值再減去一張圖片的寬度，注意要將等號后面字符串使用parseInt轉(zhuǎn)換為數(shù)字才可以進行減法，減去的圖片寬度要加px單位 ⑥反方向同樣，但是注意是相反的，要加上一張圖片的寬度 ⑦左右箭頭的寫法很相似，只是加減不一樣，可以封裝成一個函數(shù)，通過參數(shù)的正負值實現(xiàn)加減查看全部
-
樣式布局關(guān)鍵代碼講解： ①父容器：承載圖片、圓點下標、左右切換箭頭，要讓超出本分隱藏overflow：hidden、定位relative ②承載圖片的div要添加定位：absolute讓它基于父容器relative，z-index為1 ③圓點下標和左右切換箭頭的z-index為2，position也為absolute，讓其覆蓋在圖片上 ④左右切換箭頭一開始設(shè)置隱藏display：none，鼠標移上時讓其顯示，給外層hover：圖片容器display：block，讓圖片移動到外層容器時顯示箭頭，改變透明度RGBA ⑤給圖片容器設(shè)置行內(nèi)style：left值，讓它顯示第一張圖，注意：因為有開始和結(jié)束位置分別有一張附屬圖片，所以要注意left的值，讓它顯示第一張圖片查看全部
-
①焦點輪播圖所用技能點： DOM操作、定時器、事件運用、JS動畫、函數(shù)遞歸、無限滾動 ②包含圖片的父級標簽 要有一個屬性：overflow:hidden 來隱藏超出自身尺寸的內(nèi)容 ③為了實現(xiàn)輪播效果，要在開始和結(jié)束位置添加兩張相同的附屬圖查看全部
-
parseInt把字符串轉(zhuǎn)換成數(shù)字查看全部
-
快速點擊時，會出現(xiàn)小圓點和圖片不對應(yīng)的情況，解決方案是當圖片處于動畫狀態(tài)時，直接屏蔽掉點擊事件 next.onclick = function(){ if(animated){return;} else{ if(index == 1){ index = 5; } else{ index -= 1; } animate(-600); return false; } }查看全部
-
在圓點切換的時候 next.onclick = function () { index += 1; index = index > 5 ? 1 : index; showButton(); animate(-600); } prev.onclick = function () { index -= 1; index = index < 1 ? 5 : index; showButton() animate(-600);查看全部
-
點擊左右鍵時，小圓點隨之亮起查看全部
-
提示小圓點亮起查看全部
-
js無限循環(huán)輪播查看全部
-
上一頁和下一頁點擊切換輪播圖查看全部
-
焦點圖輪播物資 所用到的技能點： DOM 定時器 事件運用 JS動畫 函數(shù)遞歸 無限滾動 包含圖片和操作欄的父級標簽 要有一個屬性：overflow:hidden 來隱藏超出自身尺寸的內(nèi)容 然后再為列表中的圖片加一個LEFT的值 如-1200查看全部
-
圖片輪播所用技能： DOM操作； 定時器； 事件； JS動畫； 函數(shù)遞歸；查看全部
舉報
0/150
提交
取消