有沒有想過？一直從事流水線操作的你，或許在編程中的流程控制方面天賦異稟。有沒有想過？一直以來左右逢源的你，或許也能靠手中的鍵盤做點(diǎn)大事？有沒有想過？平時(shí)好像平淡" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 零基礎(chǔ)一篇文章實(shí)現(xiàn)網(wǎng)頁輪播圖效果，我太難了啊

零基礎(chǔ)一篇文章實(shí)現(xiàn)網(wǎng)頁輪播圖效果，我太難了啊

時(shí)間：2023-09-27 14:18:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-27 14:18:01 來源：網(wǎng)站運(yùn)營

零基礎(chǔ)一篇文章實(shí)現(xiàn)網(wǎng)頁輪播圖效果，我太難了?。?h3 data-first-child>你瞅啥？


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




或者，也許你并沒有！那么跟我一起動(dòng)手試試就知道了！













不扯淡，上干貨！




我們要做的成果展示（輪播圖）：







菜單（需要的材料）：




  1. html語言（處理頁面結(jié)構(gòu)）



  1. css語言（美化頁面）



  1. javaScript語言（讓頁面動(dòng)起來）






我們分別用3大模塊來單獨(dú)實(shí)現(xiàn)，做這個(gè)就別想那個(gè)




編寫頁面骨架html







  1. 我們在某個(gè)文件夾內(nèi)點(diǎn)擊鼠標(biāo)右鍵，新建一個(gè)文本文件,像這樣



  1. 接著我們在里面編寫如下代碼



  1. 標(biāo)簽有單、雙之分，雙標(biāo)簽以為結(jié)束，標(biāo)簽內(nèi)的標(biāo)簽是裝在里面的東西



  1. 下面的結(jié)構(gòu)是yonghukan包含lunbotuhezi






<html> <head> <title>這是我的輪播圖頁面喲</title> </head> <body> <div id="yong_hu_kan"> <div id="lun_bo_tu_he_zi"> <!-- 這里未來放點(diǎn)東西 --> </div> </div> </body></html>





  1. 接著在里面放入3組


    盒子
    圖片（
    http的那個(gè)是圖片地址，不要去手抄喲）
    1. `html













































6. 接著運(yùn)行程序，最簡單的方法就是把剛才的編寫的文件__用鼠標(biāo)左鍵脫到瀏覽器中再放手__,如無意外，你將看到<img src="https://graph.baidu.com/resource/2229d403d2fb9ddab946f01581441581.png" alt="image-20200211222322610" style="zoom:50%;" />__兄嘚,那么你的html頁面就完成了__#### CSS美化一下__敲黑板了！__![image-20200211225738616](https://img-blog.csdnimg.cn/20200212014442739.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RqeDExMTEx,size_16,color_FFFFFF,t_70)1. 在head標(biāo)簽中加入如下代碼，設(shè)置他們的寬高 1. ```html <style> #yong_hu_kan { width:200px; height:200px; } #lun_bo_tu_he_zi { width:600px; height:200px; } </style>





  1. 讓圖片橫著排列 ,那就讓luobotuhezi 里面的3個(gè)div都向左漂浮就好,繼續(xù)在style標(biāo)簽中加入如下代碼
    1. `css









lunbotuhezi div {




float:left;}




3. 好了，記得Ctrl S 鍵來保存一下，保存以后，把文件丟到瀏覽器中，你將看到：![image-20200211230247790](https://img-blog.csdnimg.cn/20200212014442972.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RqeDExMTEx,size_16,color_FFFFFF,t_70)4. 接下來還有一個(gè)障礙要掃清（別問為什么，我太難了） 1. ![image-20200211231332879](https://img-blog.csdnimg.cn/20200212014443243.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RqeDExMTEx,size_16,color_FFFFFF,t_70) 2. 接著我們在style標(biāo)簽中加入 3. ```css body { margin:0px; }


至此CSS美化就搞定?。?！







JavaScript篇




這一篇呢，想比之前的會(huì)難一些，出現(xiàn)的知識盲點(diǎn)也是無法避免的，由于篇幅有限，你只用知道有什么用、怎么用就好了




先來個(gè)熱場，在body標(biāo)簽的結(jié)束標(biāo)簽上方編寫




<script> // 這里未來會(huì)放代碼，下面的body不要照抄， // 寫出來是讓大家知道位置 </script></body>























首先我們先分析一下，咱們現(xiàn)在3張圖應(yīng)該都橫向排列了，那么接下來分解一下任務(wù)，代碼寫到script標(biāo)簽里面：




  1. 獲取已經(jīng)設(shè)置600px寬度的lunbotuhezi盒子（內(nèi)有3組div img）
    1. `js
      var ele = document.getElementById('lunbotuhezi')









2. 讓圖1向左移動(dòng)，出現(xiàn)圖2，再向左移動(dòng)，出現(xiàn)圖3 1. ```js ele.style.left = ele.offsetLeft - 200 'px';





  1. 以上代碼的意思是 描述位置：設(shè)置有多靠左 = 現(xiàn)在有多靠左 - 200（圖片寬） 拼接 'px'
    1. 每次的移動(dòng)需要間隔1秒再移動(dòng)（代碼是固定格式）






  1. `js
    setInterval(function() {
    // 你要做的是
    },1000)






4. 目前設(shè)置了盒子的left屬性，盒子還不能移動(dòng)，原因是默認(rèn)布局方式類似擺貨架，左邊是墻壁，沒法讓其往左邊移動(dòng)，因此我們給他設(shè)置絕對定位，就可以隨處飛，甚至飛出屏幕外。![image-20200211233903679](https://img-blog.csdnimg.cn/202002120144442.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RqeDExMTEx,size_16,color_FFFFFF,t_70)5. 那么來吧，理解了就往下寫 1. ```js ele.style.position = 'absolute'; ele.style.left = '0px';





  1. 第一，設(shè)置絕對定位就可以隨便飛absolute（絕對的意思）。第二，設(shè)置一個(gè)它開始的left位置為墻壁靠邊邊（道理類似與有始有終）
    1. 整理一下，現(xiàn)在咱們的代碼是這樣的（//是注釋，不影響程序運(yù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)圖怎么移動(dòng)就都沒了？




究其原因就是我們沒有控制他什么時(shí)候回到初始繼續(xù)滾動(dòng)







接下來問題來了，那么第三步應(yīng)該干嘛？ 還向左繼續(xù)移動(dòng)嗎？那不就啥也沒有了??！因此我們需要讓他回到起點(diǎn)，即：設(shè)置left = 0px; 還繼續(xù)后續(xù)的移動(dòng)，我們將代碼修改成如下：




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)在再好了，接下來就是美化的事了：




  1. 3個(gè)圖片同時(shí)出現(xiàn)不好看，我們需要出現(xiàn)一個(gè)，則需要把隨著盒子不斷向左 移動(dòng)而超出


    盒子的內(nèi)容隱藏掉。我們用css給它設(shè)置3個(gè)樣式
    1. `css













yonghukan {




overflow: hidden;position: relative;}




2. 第一個(gè)屬性是超出部分隱藏，第二個(gè)屬性是由于我們之前設(shè)置絕對定位是起飛，因此讓頁面不在知道盒子之間的包含關(guān)系了，因此我們這里聲明一下，也就是#yong_hu_kan和#lun_bo_tu_he_zi的關(guān)系2. 再來加個(gè)慢慢過渡的效果 1. 針對那個(gè)元素？ 回答：#lun_bo_tu_he_zi 2. 哪一個(gè)屬性的改變需要過渡？ 回答：left 3. 過渡時(shí)間放緩，需要幾秒完成？ 回答：1s 4. ```css #lun_bo_tu_he_zi { transition:left 1s; }


搞定！看效果










寫在最后




哎喲，累死了，因?yàn)橛行┲R存在盲區(qū)，所以講解的時(shí)候幾乎都是左顧右盼來講解的，最后希望大家都能通過這個(gè)案例對于前端有一定的興趣，我是杭州人，希望大家能借著這次疫情明白，荒年餓不死手藝人的道理，也希望大家可以多學(xué)習(xí)，少追星。。。另外：有需要源碼或者做到一半不會(huì)做的同學(xué)可以想辦法聯(lián)系我，因?yàn)椴荒馨l(fā)第三方的聯(lián)系方式，所以一般都是關(guān)注 私信之類的來聯(lián)系了



關(guān)鍵詞：效果,基礎(chǔ),文章,實(shí)現(xiàn)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉