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