零基礎一篇文章實現網頁輪播圖效果，我太難了啊

時間 2020-02-13

標籤零基礎一篇文章實現網頁效果太難欄目 HTML 简体版

原文原文鏈接

你瞅啥？

有沒有想過？一直從事流水線操做的你，或許在編程中的流程控制方面天賦異稟。有沒有想過？一直以來左右逢源的你，或許也能靠手中的鍵盤作點大事？有沒有想過？平時好像平淡無奇的你，或許身上埋藏了「程序員」的驚奇骨骼。css

或者，也許你並無！那麼跟我一塊兒動手試試就知道了！html

不扯淡，上乾貨！

咱們要作的成果展現（輪播圖）：前端

菜單（須要的材料）：

html語言（處理頁面結構）
css語言（美化頁面）
javaScript語言（讓頁面動起來）

咱們分別用3大模塊來單獨實現，作這個就別想那個java

編寫頁面骨架html

咱們在某個文件夾內點擊鼠標右鍵，新建一個__文本文件__,像這樣
接着咱們在裏面編寫以下代碼
標籤有單、雙之分，雙標籤以</標籤名>爲結束，標籤內的標籤是裝在裏面的東西
下面的結構是yong_hu_kan包含lun_bo_tu_he_zi

<html>
    <head>
        <title>這是個人輪播圖頁面喲</title>
    </head>
    <body>
        <div id="yong_hu_kan">
           <div id="lun_bo_tu_he_zi">
           		<!-- 這裏將來放點東西 -->
            </div>     
        </div>
    </body>
</html>
複製代碼

接着在裏面放入3組程序員

盒子

圖片（ http的那個是圖片地址，不要去手抄喲）

<div>
                    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
                </div>
                <div>
                    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmesH11iotzh7lM0G292gt2X2cmdsxkgO5bl2O4yRGf9GN2HWz.D661rMtBCu5EbBQAwjheXdpWZllS6w9itABFIM!/b&bo=yADIAAAAAAACFzM!&rf=viewer_4">
                </div>
                <div>
                    <img src="http://m.qpic.cn/psc?/V10aHtC10oCJrV/OgsY8p8GsL2M2s50.OYmelxYkBSa1PKhQg7hvHxY6j1IRViMD7DJodEmEq0C005P2hRwMZljkSalJq5OdxLVEiIB4AS6aup2wvsDQ2ZVQZM!/b&bo=yADIAAAAAAADByI!&rf=viewer_4">
                </div>

複製代碼

接着運行程序，最簡單的方法就是把剛纔的編寫的文件__用鼠標左鍵脫到瀏覽器中再放手__,如無心外，你將看到編程

兄嘚,那麼你的html頁面就完成了瀏覽器

CSS美化一下

敲黑板了！佈局

在head標籤中加入以下代碼，設置他們的寬高學習

<style> #yong_hu_kan { width:200px; height:200px; } #lun_bo_tu_he_zi { width:600px; height:200px; } </style>

複製代碼

讓圖片橫着排列 ,那就讓luo_bo_tu_he_zi 裏面的3個div都向左漂浮就好,繼續在style標籤中加入以下代碼ui
1. ```
#lun_bo_tu_he_zi div {
    float:left;
}
複製代碼
```
好了，記得Ctrl S 鍵來保存一下，保存之後，把文件丟到瀏覽器中，你將看到：
接下來還有一個障礙要掃清（別問爲何，我太難了）
2. 接着咱們在style標籤中加入
3. ```
body { margin:0px; }
複製代碼
```

至此CSS美化就搞定！！！

JavaScript篇

這一篇呢，想比以前的會難一些，出現的知識盲點也是沒法避免的，因爲篇幅有限，你只用知道有什麼用、怎麼用就行了

先來個熱場，在body標籤的結束標籤上方編寫

<script> // 這裏將來會放代碼，下面的body不要照抄， // 寫出來是讓你們知道位置 </script>
</body>
複製代碼

首先咱們先分析一下，我們如今3張圖應該都橫向排列了，那麼接下來分解一下任務，代碼寫到script標籤裏面：

獲取已經設置600px寬度的lun_bo_tu_he_zi盒子（內有3組div img）
1. ```
var ele = document.getElementById('lun_bo_tu_he_zi')
複製代碼
```
讓圖1向左移動，出現圖2，再向左移動，出現圖3
1. ```
ele.style.left = ele.offsetLeft - 200   'px';
複製代碼
```
2. 以上代碼的意思是 描述位置：設置有多靠左 = 如今有多靠左 - 200（圖片寬）拼接 'px'

每次的移動須要間隔1秒再移動（代碼是固定格式）

setInterval(function() {
    // 你要作的是
},1000)
複製代碼

目前設置了盒子的left屬性，盒子還不能移動，緣由是默認佈局方式相似擺貨架，左邊是牆壁，無法讓其往左邊移動，所以咱們給他設置絕對定位，就能夠隨處飛，甚至飛出屏幕外。
那麼來吧，理解了就往下寫
1. ```
ele.style.position = 'absolute';
ele.style.left = '0px';
複製代碼
```
2. 第一，設置絕對定位就能夠隨便飛absolute（絕對的意思）。第二，設置一個它開始的left位置爲牆壁靠邊邊（道理相似與善始善終）

整理一下，如今我們的代碼是這樣的（//是註釋，不影響程序運行，僅僅讓人能看懂代碼

<style> // 獲取盒子 var ele = document.getElementById('lun_bo_tu_he_zi'); // 讓它飛 ele.style.position = 'absolute'; // 設置從哪飛 ele.style.left = '0px'; // 每隔一秒作什麼事 setInterval(function () { // 設置它有多靠左 = 如今有多左 - 200 拼接'px' ele.style.left = ele.offsetLeft - 200 'px'; },1000) </style>	
複製代碼

好了，接下來能夠看效果了,記得保存文件和刷新瀏覽器

修修補補

哎喲哎喲，剛纔發現圖怎麼移動就都沒了？

究其緣由就是咱們沒有控制他何時回到初始繼續滾動

接下來問題來了，那麼第三步應該幹嗎？還向左繼續移動嗎？那不就啥也沒有了！！所以咱們須要讓他回到起點，即：設置left = 0px; 還繼續後續的移動，咱們將代碼修改爲以下：

setInterval(function () {
    // 若是知足（）裏面的條件就執行後續，不然執行else
    if (ele.offsetLeft <= -400) {
        // 設置它有多靠左 = '0px'
     	ele.style.left ='0px';
    } else {
        // 設置它有多靠左 = 如今有多左 - 200 拼接'px'
    	 ele.style.left = ele.offsetLeft - 200   'px';
    }
},1000)

複製代碼

如今再好了，接下來就是美化的事了：

3個圖片同時出現很差看，咱們須要出現一個，則須要把隨着盒子不斷向左移動而超出
盒子的內容隱藏掉。咱們用css給它設置3個樣式
1. ```
#yong_hu_kan {
 		overflow: hidden;
        position: relative;
}
複製代碼
```
2. 第一個屬性是超出部分隱藏，第二個屬性是因爲咱們以前設置絕對定位是起飛，所以讓頁面不在知道盒子之間的包含關係了，所以咱們這裏聲明一下，也就是#yong_hu_kan和#lun_bo_tu_he_zi的關係
再來加個慢慢過渡的效果
1. 針對那個元素？回答：#lun_bo_tu_he_zi
2. 哪個屬性的改變須要過渡？回答：left
3. 過渡時間放緩，須要幾秒完成？回答：1s
4. ```
#lun_bo_tu_he_zi {
    transition:left 1s;
}
複製代碼
```

搞定！看效果

寫在最後

哎喲，累死了，由於有些知識存在盲區，因此講解的時候幾乎都是左顧右盼來說解的，最後但願你們都能經過這個案例對於前端有必定的興趣，我是武漢人，但願你們能借着此次疫情明白，荒年餓不死手藝人的道理，也但願你們能夠多學習，少追星。。。另外：有須要源碼或者作到一半不會作的同窗能夠想辦法聯繫我，由於不能發第三方的聯繫方式，因此通常都是關注私信之類的來聯繫了

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。