整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
說(shuō)一下需要的知識(shí) setinterval函數(shù)，明白document. getelementsById是什么意思。
輪播呈現(xiàn)方式多種多樣，鄙人在這里給出一個(gè)比較low的方法，若有大神指教，不甚感激！
思路：
1、在body里面設(shè)置一個(gè)img標(biāo)簽，src路徑暫且不設(shè)置，并給img標(biāo)簽設(shè)置id。
2、寫(xiě)一個(gè)function函數(shù)，里面設(shè)置src隨著某種變量而改變的條件。
下面擼代碼！！！
在這里我采用了投機(jī)取巧的方式，我的圖片名都是：
讀者可以按照需要改變一下函數(shù)的結(jié)構(gòu)
輪播圖已經(jīng)是一個(gè)很常見(jiàn)的東西，尤其是在各大App的首頁(yè)頂部欄，經(jīng)常會(huì)輪番顯示不同的圖片。
一提到輪播圖如何實(shí)現(xiàn)時(shí)，很多人的第一反應(yīng)就是使用Javascript的定時(shí)器，當(dāng)然這種方法是可以實(shí)現(xiàn)的。不過(guò)就是有些繁瑣，今天這篇文章我們來(lái)看看如何不用Javascript，而使用純CSS代碼去實(shí)現(xiàn)輪播圖吧。
這篇文章的所有代碼我都放在了github上，感興趣的同學(xué)可以去看看。
https://github.com/zhouxiongking/article-pages/blob/master/articles/carousel/carousel.html
CSS
首先我們來(lái)看看只使用CSS實(shí)現(xiàn)的輪播圖效果。
實(shí)現(xiàn)效果圖
看到上述的實(shí)現(xiàn)效果后，我們來(lái)具體分析下頁(yè)面的構(gòu)成。
頁(yè)面在布局上首先要有5張圖片，圖片固定寬度。
每張圖片對(duì)應(yīng)一個(gè)標(biāo)題，標(biāo)題通過(guò)ul>li實(shí)現(xiàn)，事先算好寬度，跟隨圖片一起滾動(dòng)。
下邊有個(gè)1,2,3,4,5表示圖片順序的索引，鼠標(biāo)放上去后會(huì)顯示對(duì)應(yīng)的圖片。
接下來(lái)我們通過(guò)代碼層面去看看整個(gè)效果是如何實(shí)現(xiàn)的。
首先來(lái)看看HTML頁(yè)面的實(shí)現(xiàn)，代碼中都有每個(gè)區(qū)域的描述。
HTML頁(yè)面
實(shí)現(xiàn)這個(gè)效果主要是通過(guò)CSS代碼的，其代碼量比較大，我們分開(kāi)來(lái)看。
外層容器
對(duì)于最外層容器我們?cè)O(shè)置絕對(duì)定位，方便圖片標(biāo)題子元素的定位。
外層容器
圖片標(biāo)題
對(duì)于圖片的標(biāo)題我們也采用絕對(duì)定位，并且讓標(biāo)題橫向一行展示，方便在動(dòng)畫(huà)的時(shí)候直接橫向滾動(dòng)。
得到的代碼如下所示。
圖片標(biāo)題
圖片與圖片容器
接下來(lái)是設(shè)置圖片容器屬性以及圖片的基本大小。
圖片容器也采用絕對(duì)定位，寬度可以動(dòng)態(tài)設(shè)置，根據(jù)圖片數(shù)量計(jì)算。每張圖片設(shè)置寬度與高度，得到的代碼如下。
圖片與圖片容器
圖片動(dòng)畫(huà)效果
然后設(shè)置圖片的動(dòng)畫(huà)效果，對(duì)于任意的圖片都有進(jìn)入和靜止兩個(gè)狀態(tài)，中間的效果可以任意定制。
在這里，中間效果設(shè)置成5%的間隔，其他時(shí)間在進(jìn)行位置的切換，因?yàn)閳D片是處于水平分布，通過(guò)設(shè)置margin-left的值為負(fù)數(shù)進(jìn)行偏移即可。
圖片動(dòng)畫(huà)效果
數(shù)字索引的基本屬性
對(duì)于下面的數(shù)字圖標(biāo)也是通過(guò)基本的CSS屬性進(jìn)行設(shè)置的，包括寬高，行高，透明度等等。
在鼠標(biāo)移動(dòng)到對(duì)應(yīng)的數(shù)字上后，數(shù)字會(huì)顯示不同的顏色。而且在鼠標(biāo)停留在數(shù)字上后，動(dòng)畫(huà)效果會(huì)暫停。
數(shù)字索引基本屬性
數(shù)字索引的偏移量
因?yàn)閿?shù)字是水平方向展示的，因此要設(shè)定每個(gè)數(shù)字的水平偏移量。
數(shù)字水平偏移量
鼠標(biāo)停在數(shù)字上的動(dòng)畫(huà)效果
然后就是處理鼠標(biāo)停留在數(shù)字上的動(dòng)畫(huà)效果，因?yàn)槊繌垐D片對(duì)應(yīng)特定的數(shù)字，需要計(jì)算出每次的動(dòng)畫(huà)開(kāi)始位置和結(jié)束位置。
鼠標(biāo)停在數(shù)字上的動(dòng)畫(huà)效果
動(dòng)畫(huà)效果賦予指定的數(shù)字
最后一步就是將定義的動(dòng)畫(huà)效果賦予指定的數(shù)字上，每個(gè)數(shù)字都有特定的id。得到的代碼如下。
動(dòng)畫(huà)效果賦予指定的數(shù)字
至此所有步驟完成了，就可以得到文章開(kāi)始的動(dòng)畫(huà)效果了。
這篇文章完全通過(guò)CSS實(shí)現(xiàn)了一個(gè)輪播圖的效果，相比于使用JS來(lái)說(shuō)減少頁(yè)面阻塞程度，效果更好。
JavaScript實(shí)現(xiàn)無(wú)限輪播圖效果（附源碼）
javascript群內(nèi)每日課題-今日課題：用JavaScript實(shí)現(xiàn)無(wú)限輪播圖效果
PS:很多企業(yè)通用的案例自己再學(xué)習(xí)過(guò)程中肯定是要熟練的，所以今天做了這個(gè)無(wú)限輪播，很多人都擔(dān)心自己寫(xiě)的代碼爛，而不敢去寫(xiě)代碼，總想著等自己等寫(xiě)出好的代碼再來(lái)做游戲，再來(lái)練習(xí)，其實(shí)我的意見(jiàn)是前端新人要多些爛代碼，不管你在學(xué)習(xí)中還是工作中，你不寫(xiě)夠足量的爛代碼，是無(wú)法進(jìn)化到寫(xiě)好代碼的程度，所以練習(xí)吧騷年
如果想要更多的企業(yè)求職加分項(xiàng)目，案例，游戲源碼，可以來(lái)一下我的前端群216634437，每天都會(huì)精挑細(xì)選一個(gè)特效，項(xiàng)目游戲出來(lái)詳細(xì)講解，分享！
知識(shí)要點(diǎn)
1.實(shí)現(xiàn)無(wú)限循環(huán)的原理：
以偏移的距離來(lái)判斷是否跳回第一張和最后一張
也可以利用循環(huán)判斷圖片的當(dāng)前索引值
2.當(dāng)前圖片輪播的圓點(diǎn)變色顯示：
因?yàn)槊看吸c(diǎn)擊index+1 所以當(dāng)前的index-1就是button的索引
3.實(shí)現(xiàn)動(dòng)畫(huà)滾動(dòng)效果：
原理就是把每次的偏移量分為多次完成比如一次600px那就分為10次每次偏移60px
就要用到setTimeout(go,10);//10毫秒再次調(diào)用go函數(shù)，一直到不滿足條件就停
4.點(diǎn)擊圓點(diǎn)按鈕執(zhí)行動(dòng)畫(huà)：
原理獲取當(dāng)前的按鈕位置再獲取要點(diǎn)擊的按鈕的位置
用（點(diǎn)擊的——當(dāng)前的）*-600=需要跳轉(zhuǎn)的正負(fù)距離（向左或向右）
5.自動(dòng)播放：
給外層容器加個(gè)onmouseover事件再調(diào)用setInterval方法
想要練習(xí)這個(gè)案例的進(jìn)群領(lǐng)取源碼：216634437（代碼已經(jīng)上傳到群文件，自助下載練習(xí)）
頭條號(hào)里有許多web前端學(xué)習(xí)視頻，企業(yè)常用特效/案例/項(xiàng)目，敬請(qǐng)關(guān)注！
如果想看到更加系統(tǒng)的文章和學(xué)習(xí)方法經(jīng)驗(yàn)可以關(guān)注我的微信公眾號(hào)：‘web前端課程’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
