你瞅啥篡诽？
有沒有想過崖飘？一直從事流水線操作的你，或許在編程中的流程控制方面天賦異稟杈女。有沒有想過朱浴？一直以來左右逢源的你，或許也能靠手中的鍵盤做點大事达椰？有沒有想過翰蠢？平時好像平淡無奇的你，或許身上埋藏了“程序員”的驚奇骨骼砰碴。
或者躏筏，也許你并沒有！那么跟我一起動手試試就知道了呈枉！
不扯淡趁尼，上干貨！
我們要做的成果展示（輪播圖）：
菜單（需要的材料）：
- html語言（處理頁面結(jié)構(gòu)）
- css語言（美化頁面）
- javaScript語言（讓頁面動起來）
我們分別用3大模塊來單獨實現(xiàn)猖辫，做這個就別想那個
編寫頁面骨架html
- 我們在某個文件夾內(nèi)點擊鼠標(biāo)右鍵酥泞，新建一個文本文件,像這樣
- 接著我們在里面編寫如下代碼
- 標(biāo)簽有單、雙之分啃憎，雙標(biāo)簽以</標(biāo)簽名>為結(jié)束芝囤，標(biāo)簽內(nèi)的標(biāo)簽是裝在里面的東西
- 下面的結(jié)構(gòu)是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組<div>盒子 <img>圖片（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>
接著運行程序，最簡單的方法就是把剛才的編寫的文件用鼠標(biāo)左鍵脫到瀏覽器中再放手,如無意外悯姊，你將看到<img src="https://graph.baidu.com/resource/2229d403d2fb9ddab946f01581441581.png" alt="image-20200211222322610" style="zoom:50%;" />
兄嘚,那么你的html頁面就完成了
CSS美化一下
敲黑板了羡藐！
-
在head標(biāo)簽中加入如下代碼，設(shè)置他們的寬高
<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都向左漂浮就好,繼續(xù)在style標(biāo)簽中加入如下代碼
#lun_bo_tu_he_zi div { float:left; }
-
好了悯许，記得Ctrl S 鍵來保存一下仆嗦，保存以后，把文件丟到瀏覽器中先壕，你將看到：image-20200211230247790
-
接下來還有一個障礙要掃清（別問為什么瘩扼，我太難了）
- image-20200211231332879
接著我們在style標(biāo)簽中加入
body { margin:0px; }
至此CSS美化就搞定！＠拧集绰！
JavaScript篇
這一篇呢，想比之前的會難一些谆棺，出現(xiàn)的知識盲點也是無法避免的栽燕，由于篇幅有限，你只用知道有什么用包券、怎么用就好了
先來個熱場纫谅，在body標(biāo)簽的結(jié)束標(biāo)簽上方編寫
<script>
// 這里未來會放代碼，下面的body不要照抄溅固，
// 寫出來是讓大家知道位置
</script>
</body>
首先我們先分析一下付秕，咱們現(xiàn)在3張圖應(yīng)該都橫向排列了，那么接下來分解一下任務(wù)侍郭，代碼寫到script標(biāo)簽里面：
-
獲取已經(jīng)設(shè)置600px寬度的lun_bo_tu_he_zi盒子（內(nèi)有3組div img）
var ele = document.getElementById('lun_bo_tu_he_zi')
-
讓圖1向左移動询吴，出現(xiàn)圖2，再向左移動亮元，出現(xiàn)圖3
ele.style.left = ele.offsetLeft - 200 'px';以上代碼的意思是 描述位置：設(shè)置有多靠左 = 現(xiàn)在有多靠左 - 200（圖片寬） 拼接 'px'
-
每次的移動需要間隔1秒再移動（代碼是固定格式）
setInterval(function() { // 你要做的是 },1000)
-
目前設(shè)置了盒子的left屬性猛计，盒子還不能移動，原因是默認(rèn)布局方式類似擺貨架爆捞，左邊是墻壁奉瘤，沒法讓其往左邊移動，因此我們給他設(shè)置絕對定位煮甥，就可以隨處飛盗温，甚至飛出屏幕外。image-20200211233903679
-
那么來吧成肘，理解了就往下寫
ele.style.position = 'absolute'; ele.style.left = '0px';第一卖局，設(shè)置絕對定位就可以隨便飛absolute（絕對的意思）。第二双霍，設(shè)置一個它開始的left位置為墻壁靠邊邊（道理類似與有始有終）
-
整理一下砚偶，現(xiàn)在咱們的代碼是這樣的（//是注釋批销，不影響程序運行，僅僅讓人能看懂代碼
<style> // 獲取盒子 var ele = document.getElementById('lun_bo_tu_he_zi'); // 讓它飛 ele.style.position = 'absolute'; // 設(shè)置從哪飛 ele.style.left = '0px'; // 每隔一秒做什么事 setInterval(function () { // 設(shè)置它有多靠左 = 現(xiàn)在有多左 - 200 拼接'px' ele.style.left = ele.offsetLeft - 200 'px'; },1000) </style>
好了染坯，接下來可以看效果了,記得保存文件和刷新瀏覽器
修修補(bǔ)補(bǔ)
哎喲哎喲均芽，剛才發(fā)現(xiàn)圖怎么移動就都沒了？
究其原因就是我們沒有控制他什么時候回到初始繼續(xù)滾動
接下來問題來了单鹿，那么第三步應(yīng)該干嘛骡技？ 還向左繼續(xù)移動嗎？那不就啥也沒有了Ｐ叻础！因此我們需要讓他回到起點囤萤，即：設(shè)置left = 0px; 還繼續(xù)后續(xù)的移動昼窗，我們將代碼修改成如下：
setInterval(function () {
// 如果滿足（）里面的條件就執(zhí)行后續(xù)，否則執(zhí)行else
if (ele.offsetLeft <= -400) {
// 設(shè)置它有多靠左 = '0px'
ele.style.left ='0px';
} else {
// 設(shè)置它有多靠左 = 現(xiàn)在有多左 - 200 拼接'px'
ele.style.left = ele.offsetLeft - 200 'px';
}
},1000)
現(xiàn)在再好了涛舍，接下來就是美化的事了：
-
3個圖片同時出現(xiàn)不好看澄惊，我們需要出現(xiàn)一個，則需要把隨著盒子不斷向左 移動而超出<div id="yong_hu_kan">盒子的內(nèi)容隱藏掉富雅。我們用css給它設(shè)置3個樣式
#yong_hu_kan { overflow: hidden; position: relative; }第一個屬性是超出部分隱藏掸驱，第二個屬性是由于我們之前設(shè)置絕對定位是起飛，因此讓頁面不在知道盒子之間的包含關(guān)系了没佑，因此我們這里聲明一下毕贼，也就是#yong_hu_kan和#lun_bo_tu_he_zi的關(guān)系
-
再來加個慢慢過渡的效果
針對那個元素？ 回答：#lun_bo_tu_he_zi
哪一個屬性的改變需要過渡蛤奢？ 回答：left
過渡時間放緩鬼癣，需要幾秒完成？ 回答：1s
#lun_bo_tu_he_zi { transition:left 1s; }
搞定啤贩！看效果
寫在最后
哎喲待秃，累死了，因為有些知識存在盲區(qū)痹屹，所以講解的時候幾乎都是左顧右盼來講解的章郁，最后希望大家都能通過這個案例對于前端有一定的興趣，我是武漢人志衍，希望大家能借著這次疫情明白暖庄，荒年餓不死手藝人的道理，也希望大家可以多學(xué)習(xí)足画，少追星雄驹。。淹辞。另外：有需要源碼或者做到一半不會做的同學(xué)可以想辦法聯(lián)系我医舆，因為不能發(fā)第三方的聯(lián)系方式俘侠，所以一般都是關(guān)注 私信之類的來聯(lián)系了
