原生程式碼實現輪播圖
我們經常在瀏覽網頁的時候看到輪播圖（比如csdn首頁就有），感覺很神奇，哇，我也要做一個！但是覺得有點難，無從下手，只能先發發呆瞎點一下左右輪播鍵
步驟：胖子不是一口吃成的，把一個複雜的問題進行切割就變成一個個簡單的問題
思路：看到美女，靈感就來了，在我們發呆的那10幾秒鐘好像發生了下面2件事：
1、我們滑鼠點選了右邊切換鍵 2、圖片神奇地換成美女圖
雖然筆者的js水平一般，但還是可以敏銳地發現上面其實就是點選了一下（onclick），然後圖片變了，圖片是怎麼變的呢？一個比較low的想法是改變圖片的路徑src，那可以給圖片加一個id,通過id獲取圖片物件，再改變它的src（頁面用的是更高階的寫法，我也不會，就不說了）
好雞凍，趕緊寫程式碼（版本1）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="swiper"> <img class="left_coin" src="../img/left.jpg" onclick="left()"> <img id="mid" src="../img/first.jpg" > <img class="right_coin" src="../img/right.jpg" onclick="right()"> </div> <script> var img = ["../img/first.jpg","../img/second.jpg","../img/third.jpg","../img/forth.jpg"] var index = 0; var num=4; function left() { index++; if(index>=num){ index = index-num } var element = document.getElementById("mid"); element.src = img[index]; //alert(element.src) } function right() { index--; if(index<0){ index = index+num } var element = document.getElementById("mid"); element.src = img[index]; } </script> </body> </html>
上面的img陣列要改成自己圖片所放置的位置。
.swiper{ width: 800px; height: 400px; } .left_coin{ width: 30px; background-color: aqua; height: 40px; display: inline-block; float: left; margin-top: 180px; }#mid{ width: 740px; height: 400px; background-color: aliceblue; display: inline-block; float: left; } .right_coin{ width: 30px; height: 40px; margin-top: 180px; display: inline-block; background-color: cadetblue; float: left; }
隨便寫一點css,真的醜，別打我，自己打css去
到這裡的程式碼應該還算比較簡單，哪句程式碼不太明白可以查一下百度谷歌
2、這時候你可能會說，輪播圖好像貌似勉強可以算是完成了，但是怎麼看都像是一個玩具，要怎麼樣才能想真實環境中從伺服器中獲取圖片呢？整個過程是這樣的：我們從資料庫拿出要輪播圖的圖片url，用js嵌入到html程式碼中。
這樣需要用到php, 資料庫等的知識，這2個方面不太會也沒什麼關係，我會做一些解釋。
首先我們要區分“伺服器端”和“瀏覽器端”，簡單理解“瀏覽器端”是你的電腦，你的瀏覽器；“伺服器端”一般指遠端伺服器（也可以是本地伺服器），比如各大公司的伺服器。html和js都是“瀏覽器端”的程式碼（按F12，你可以看到頁面的html和js），說白了只有html和css就是在自己電腦上自娛自樂。當我們不能滿足這種自娛自樂，需要伺服器端處理資料的時候，需要選一門語言來處理問題，有的公司選擇了java,c#,python,但用得最多的還是php----可能是因為它比前面的那些都要簡單。對於php,你目前需要知道只有它很簡單，不用怕它。
首先，我們先假定已經建好資料庫和資料表了，
現在的問題就是怎麼和資料庫勾搭上，拿到資料庫中的資料？
用php可以作為前端和資料庫之間的媒介，PHP有內建函式可以連線資料庫，操作資料庫。直接例子：
連線資料庫:
$user= "root";//資料庫的使用者名稱
$psw="password";//密碼
$dbh = new PDO('mysql:host=localhost;dbname=my_test',$user,$psw);//new PDO類建立一個連線，有三個引數：'資料庫型別，主機，資料庫名'，'賬號'，'密碼'成功連線資料庫相當於打電話打通了，接下來說清楚具體想幹嘛了，增刪還是改查。我們這裡例子是從資料庫中查詢，拿到結果
$sql = $dbh->query("SELECT * FROM banner_url");//查詢語法
$result = $sql->fetchAll();//獲取資料
$num =count($result);//計數//var_dump($result) //可以看看是不是我們有沒有拿到我們想要的資料//echo $num;將拿到$result 改變一下格式，賦值給剛剛的img，就大功告成了。這裡需要說一下的是，js獲取後臺php的方法很多，這裡先不涉及。
後面，你還可以寫一個上傳圖片程式。上傳圖片可以在網上找到相關程式碼，（我就是直接在菜鳥課程上面copy的），在上傳圖片的程式中該一下，拿到圖片的名稱，把圖片的路徑儲存到資料庫中就可以了。