1、css3動畫實現(xiàn)的輪播圖
實現(xiàn)原理如下呀：
1、設置大的div? ? a)設置絕對定位，定位位置，b)設置圖片展示出來的高度和寬度（height和width）； c)設置overflow:hidden;設置超出部分隱藏；使得圖片只能在這個框中顯示；
2、設置小的div,將所有圖片都包起來；寬度是所有圖片的寬度；設置position:relative // position:absolute? 來讓它可以實現(xiàn)輪播的功能；必不可少。（自己的理解，設置大div和小div 的position,來讓div浮起來，脫離文檔流，就像云一樣，可以飄了~）
3、給里面的圖片設置float:left;向左浮動，可以讓所有圖片都在同一行；如果沒有float:left；會導致圖片輪播的時候出現(xiàn)空白；
4、加入動畫；每次都向左偏移一個圖片的寬度，即可實現(xiàn)圖片輪播；
5、將第一張圖片與最后一張圖片設置成一樣的，是為了實現(xiàn)視覺上的無縫連接；
代碼：
2、bootstrap框架
知識點：（這里只寫了一點點，具體的知識點 在菜鳥教程里可以看的很清晰噠~? 鏈接地址：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html）
通過data屬性：使用data屬性可以很容易控制輪播（Carousel）的位置；
*屬性data-slide 接受關鍵字prev或next,用來改變幻燈片相對于當前位置的位置。
*使用data-slide-to來向輪播傳遞一個原始滑動索引，data-slide-to="2"將把滑塊移動到一個特定的索引，索引從0開始計數(shù)。
代碼：（直接往里帶即可）
3、用js方法實現(xiàn)（重頭戲?。。。?/h2>實現(xiàn)原理：
1、自動輪播：
用setInterval(調(diào)用的函數(shù)，時間)；? 注意"調(diào)用的函數(shù)"處要寫成函數(shù)名，不能帶括號，帶括號表示立即調(diào)用這個函數(shù)，不帶則表示指向函數(shù)的指針。
被調(diào)用的函數(shù) ，我的代碼中呢，是xunhuan() ； 不斷地自加，也就是不斷地往后循環(huán)，if語句實現(xiàn)的是：當圖片到最后一張時，讓其跳轉到第一張。
調(diào)用的change1()函數(shù)呢，實際上就是實現(xiàn)輪播的較為核心的部分；先將所有圖片，點點的樣式設置為一樣的，再對當前索引對應的圖片，點點設置特別的樣式。
2、鼠標移入，移出事件；
接下來的pointlist,以及兩個for循環(huán) 里的事件監(jiān)聽事件，都是為了實現(xiàn)鼠標的移入，移出。
pointlist 點點；imgs 圖片； spans 左右按鈕。
注意：1）如果你想要通過點擊事件來改變圖片的移動時，就必須讓鼠標移動到上面時設置清除計時器；因為如果不設置的話，當你通過點擊事件改變它時，它自身也會自己改變，會出現(xiàn)混亂。2）當清除完后，鼠標移出后需要重新啟動計時器，這時候不能再給它設置var jishi;因為如果再加上var 的話，相當于重新又定義了一個變量，會有好幾個計時器同時進行，會越來越快。
3、手動輪播 底下小點點的按鈕控制
判斷點擊的是哪個點點，然后將它的索引值賦值給index，再通過調(diào)用change1()函數(shù)，來實現(xiàn)它的改變。
這里我是通過將點擊元素的父元素來和所有的li進行比較，如果一樣，則將對應的索引值賦值給index.
4、左右按鈕的控制
讓它實現(xiàn)自增或自減，然后調(diào)用change1()函數(shù)來改變樣式。 其實這里的知識點和自動輪播里的知識點差不多。（從最后一張圖片跳轉到第一張圖片 ，從第一張?zhí)D到最后一張。）
無論是自動輪播，還是點擊控制，都要加入change1() 以及index 來實現(xiàn)對樣式的控制，從而實現(xiàn)輪播的效果。
1、自動輪播：
用setInterval(調(diào)用的函數(shù)，時間)；? 注意"調(diào)用的函數(shù)"處要寫成函數(shù)名，不能帶括號，帶括號表示立即調(diào)用這個函數(shù)，不帶則表示指向函數(shù)的指針。
被調(diào)用的函數(shù) ，我的代碼中呢，是xunhuan() ； 不斷地自加，也就是不斷地往后循環(huán)，if語句實現(xiàn)的是：當圖片到最后一張時，讓其跳轉到第一張。
調(diào)用的change1()函數(shù)呢，實際上就是實現(xiàn)輪播的較為核心的部分；先將所有圖片，點點的樣式設置為一樣的，再對當前索引對應的圖片，點點設置特別的樣式。
2、鼠標移入，移出事件；
接下來的pointlist,以及兩個for循環(huán) 里的事件監(jiān)聽事件，都是為了實現(xiàn)鼠標的移入，移出。
pointlist 點點；imgs 圖片； spans 左右按鈕。
注意：1）如果你想要通過點擊事件來改變圖片的移動時，就必須讓鼠標移動到上面時設置清除計時器；因為如果不設置的話，當你通過點擊事件改變它時，它自身也會自己改變，會出現(xiàn)混亂。2）當清除完后，鼠標移出后需要重新啟動計時器，這時候不能再給它設置var jishi;因為如果再加上var 的話，相當于重新又定義了一個變量，會有好幾個計時器同時進行，會越來越快。
3、手動輪播 底下小點點的按鈕控制
判斷點擊的是哪個點點，然后將它的索引值賦值給index，再通過調(diào)用change1()函數(shù)，來實現(xiàn)它的改變。
這里我是通過將點擊元素的父元素來和所有的li進行比較，如果一樣，則將對應的索引值賦值給index.
4、左右按鈕的控制
讓它實現(xiàn)自增或自減，然后調(diào)用change1()函數(shù)來改變樣式。 其實這里的知識點和自動輪播里的知識點差不多。（從最后一張圖片跳轉到第一張圖片 ，從第一張?zhí)D到最后一張。）
無論是自動輪播，還是點擊控制，都要加入change1() 以及index 來實現(xiàn)對樣式的控制，從而實現(xiàn)輪播的效果。
代碼：
4、用jQuery實現(xiàn)?
?（與js用的方法一樣，只是語法不同而已，與上面的js方法對比著看，很好理解噠~? ?用完jQuery，?發(fā)現(xiàn)相比于js來說好方便呀~? ，記得用的時候要加上?? <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>? 引用jQuery，否則沒有效果的~??）
代碼如下：
