1颜武、css3動(dòng)畫(huà)實(shí)現(xiàn)的輪播圖

實(shí)現(xiàn)原理如下呀：

1揉忘、設(shè)置大的div? ? a)設(shè)置絕對(duì)定位撑蒜，定位位置，b)設(shè)置圖片展示出來(lái)的高度和寬度（height和width）晚伙； c)設(shè)置overflow:hidden;設(shè)置超出部分隱藏；使得圖片只能在這個(gè)框中顯示捎琐；

2玻熙、設(shè)置小的div,將所有圖片都包起來(lái)；寬度是所有圖片的寬度；設(shè)置position:relative // position:absolute? 來(lái)讓它可以實(shí)現(xiàn)輪播的功能儿惫；必不可少澡罚。（自己的理解，設(shè)置大div和小div 的position,來(lái)讓div浮起來(lái)肾请，脫離文檔流留搔，就像云一樣，可以飄了~）

3铛铁、給里面的圖片設(shè)置float:left;向左浮動(dòng)隔显，可以讓所有圖片都在同一行；如果沒(méi)有float:left饵逐；會(huì)導(dǎo)致圖片輪播的時(shí)候出現(xiàn)空白括眠；

4、加入動(dòng)畫(huà)倍权；每次都向左偏移一個(gè)圖片的寬度掷豺，即可實(shí)現(xiàn)圖片輪播；

5账锹、將第一張圖片與最后一張圖片設(shè)置成一樣的萌业，是為了實(shí)現(xiàn)視覺(jué)上的無(wú)縫連接；

代碼：

2奸柬、bootstrap框架

知識(shí)點(diǎn)：（這里只寫(xiě)了一點(diǎn)點(diǎn)生年，具體的知識(shí)點(diǎn) 在菜鳥(niǎo)教程里可以看的很清晰噠~? 鏈接地址：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html）

通過(guò)data屬性：使用data屬性可以很容易控制輪播（Carousel）的位置；

*屬性data-slide 接受關(guān)鍵字prev或next,用來(lái)改變幻燈片相對(duì)于當(dāng)前位置的位置廓奕。

*使用data-slide-to來(lái)向輪播傳遞一個(gè)原始滑動(dòng)索引抱婉，data-slide-to="2"將把滑塊移動(dòng)到一個(gè)特定的索引，索引從0開(kāi)始計(jì)數(shù)桌粉。

代碼：（直接往里帶即可）

3蒸绩、用js方法實(shí)現(xiàn)（重頭戲！Ａ蹇稀；家凇）

實(shí)現(xiàn)原理：

1、自動(dòng)輪播：

用setInterval(調(diào)用的函數(shù)押逼，時(shí)間)步藕；? 注意"調(diào)用的函數(shù)"處要寫(xiě)成函數(shù)名，不能帶括號(hào)挑格，帶括號(hào)表示立即調(diào)用這個(gè)函數(shù)咙冗，不帶則表示指向函數(shù)的指針。

被調(diào)用的函數(shù) 漂彤，我的代碼中呢雾消，是xunhuan() 灾搏； 不斷地自加，也就是不斷地往后循環(huán)立润，if語(yǔ)句實(shí)現(xiàn)的是：當(dāng)圖片到最后一張時(shí)狂窑，讓其跳轉(zhuǎn)到第一張。

調(diào)用的change1()函數(shù)呢范删，實(shí)際上就是實(shí)現(xiàn)輪播的較為核心的部分蕾域；先將所有圖片，點(diǎn)點(diǎn)的樣式設(shè)置為一樣的到旦，再對(duì)當(dāng)前索引對(duì)應(yīng)的圖片旨巷，點(diǎn)點(diǎn)設(shè)置特別的樣式。

2添忘、鼠標(biāo)移入采呐，移出事件；

接下來(lái)的pointlist,以及兩個(gè)for循環(huán) 里的事件監(jiān)聽(tīng)事件搁骑，都是為了實(shí)現(xiàn)鼠標(biāo)的移入斧吐，移出。

pointlist 點(diǎn)點(diǎn)仲器；imgs 圖片煤率； spans 左右按鈕。

注意：1）如果你想要通過(guò)點(diǎn)擊事件來(lái)改變圖片的移動(dòng)時(shí)乏冀，就必須讓鼠標(biāo)移動(dòng)到上面時(shí)設(shè)置清除計(jì)時(shí)器蝶糯；因?yàn)槿绻辉O(shè)置的話，當(dāng)你通過(guò)點(diǎn)擊事件改變它時(shí)辆沦，它自身也會(huì)自己改變昼捍，會(huì)出現(xiàn)混亂。2）當(dāng)清除完后肢扯，鼠標(biāo)移出后需要重新啟動(dòng)計(jì)時(shí)器妒茬，這時(shí)候不能再給它設(shè)置var jishi;因?yàn)槿绻偌由蟰ar 的話，相當(dāng)于重新又定義了一個(gè)變量蔚晨，會(huì)有好幾個(gè)計(jì)時(shí)器同時(shí)進(jìn)行乍钻，會(huì)越來(lái)越快。

3铭腕、手動(dòng)輪播 底下小點(diǎn)點(diǎn)的按鈕控制

判斷點(diǎn)擊的是哪個(gè)點(diǎn)點(diǎn)银择，然后將它的索引值賦值給index，再通過(guò)調(diào)用change1()函數(shù)谨履，來(lái)實(shí)現(xiàn)它的改變欢摄。

這里我是通過(guò)將點(diǎn)擊元素的父元素來(lái)和所有的li進(jìn)行比較熬丧，如果一樣笋粟，則將對(duì)應(yīng)的索引值賦值給index.

4怀挠、左右按鈕的控制

讓它實(shí)現(xiàn)自增或自減，然后調(diào)用change1()函數(shù)來(lái)改變樣式害捕。 其實(shí)這里的知識(shí)點(diǎn)和自動(dòng)輪播里的知識(shí)點(diǎn)差不多绿淋。（從最后一張圖片跳轉(zhuǎn)到第一張圖片 ，從第一張?zhí)D(zhuǎn)到最后一張尝盼。）

無(wú)論是自動(dòng)輪播吞滞，還是點(diǎn)擊控制，都要加入change1() 以及index 來(lái)實(shí)現(xiàn)對(duì)樣式的控制盾沫，從而實(shí)現(xiàn)輪播的效果裁赠。

代碼：

4、用jQuery實(shí)現(xiàn)?

?（與js用的方法一樣赴精，只是語(yǔ)法不同而已佩捞，與上面的js方法對(duì)比著看，很好理解噠~? ?用完jQuery蕾哟，?發(fā)現(xiàn)相比于js來(lái)說(shuō)好方便呀~? 一忱，記得用的時(shí)候要加上?? <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>? 引用jQuery，否則沒(méi)有效果的~??）

代碼如下：