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

瞅啥？

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

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

不扯淡，上干貨！

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

菜單（需要的材料）：

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

我們分別用3大模塊來單獨實現，做這個就別想那個

編寫頁面骨架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標簽中加入如下代碼
#lun_bo_tu_he_zi div {
float:left;
}
好了，記得Ctrl + S 鍵來保存一下，保存以后，把文件丟到瀏覽器中，你將看到：
接下來還有一個障礙要掃清（別問為什么，我太難了）
接著我們在style標簽中加入
body { margin:0px; }

至此CSS美化就搞定！！！

JavaScript篇

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

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

首先我們先分析一下，咱們現在3張圖應該都橫向排列了，那么接下來分解一下任務，代碼寫到script標簽里面：

獲取已經設置600px寬度的lun_bo_tu_he_zi盒子（內有3組div+img）
var ele=document.getElementById('lun_bo_tu_he_zi')
讓圖1向左移動，出現圖2，再向左移動，出現圖3
ele.style.left=ele.offsetLeft - 200 + 'px';
以上代碼的意思是描述位置：設置有多靠左=現在有多靠左 - 200（圖片寬）拼接 'px'
每次的移動需要間隔1秒再移動（代碼是固定格式）
setInterval(function() {
// 你要做的是
},1000)
目前設置了盒子的left屬性，盒子還不能移動，原因是默認布局方式類似擺貨架，左邊是墻壁，沒法讓其往左邊移動，因此我們給他設置絕對定位，就可以隨處飛，甚至飛出屏幕外。
那么來吧，理解了就往下寫
ele.style.position='absolute';
ele.style.left='0px';
第一，設置絕對定位就可以隨便飛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個樣式
#yong_hu_kan {
overflow: hidden;
position: relative;
}
第一個屬性是超出部分隱藏，第二個屬性是由于我們之前設置絕對定位是起飛，因此讓頁面不在知道盒子之間的包含關系了，因此我們這里聲明一下，也就是#yong_hu_kan和#lun_bo_tu_he_zi的關系
再來加個慢慢過渡的效果
針對那個元素？回答：#lun_bo_tu_he_zi
哪一個屬性的改變需要過渡？回答：left
過渡時間放緩，需要幾秒完成？回答：1s
#lun_bo_tu_he_zi {
transition:left 1s;
}

搞定！看效果

寫在最后

哎喲，累死了，因為有些知識存在盲區，所以講解的時候幾乎都是左顧右盼來講解的，最后希望大家都能通過這個案例對于前端有一定的興趣，我是武漢人，希望大家能借著這次疫情明白，荒年餓不死手藝人的道理，也希望大家可以多學習，少追星。。。另外：有需要源碼或者做到一半不會做的同學可以想辦法聯系我，因為不能發第三方的聯系方式，所以一般都是關注+私信之類的來聯系了

端實用特效：javascript制作騰訊新聞輪播小案例

javascript正則實現QQ空間換膚效果源碼：

源碼以上傳至群589651705群文件，小伙伴們可以進群自行下載。

更加系統的小案例和學習方法可以關注我的微信公眾號：‘學習web前端’關注后回復‘給我資料’可以領取一套完整的學習視頻

猿圈今天給大家分享的事制作輪播圖的的三種方法，希望大家要用心學習哦，有其他的問題也歡迎大家留言或者私信我哦。

，

一、通過CSS3的animation屬性以及 @keyframes規則實現。

首先學習 CSS3當中的@keyframes和animation。

@keyframes規則—用于創建動畫，在@keyframes中規定某個CSS樣式，就能創建

由當前樣式逐漸變成新樣式的動畫效果。

瀏覽器支持：

Internet Explorer 10 （IE10）、Firefox 、Opera 支持 animation屬性以及 @keyframes規則，chrome、Safari 需要加前綴 “-webkit-”（注意： IE9 以及更早的版本，不支持 animation屬性以及 @keyframes規則）

@keyframes 語法： @keyframes 函數名(自定義){

內容：eg：

@keyframes firstAnimation{

from {background: yellow;}

to{ background: red;}

}

// safari和chrome

@-webkit-keyframes firstAnimation{

from {background: yellow;}

to{ background: red;}

} CSS3 動畫

用@keyframes規則傳創建動畫時，需要將其(函數名)綁定到某個選擇器，否則不會產生動畫效果。

二，jQuery load() 方法：load() 方法從服務器加載數據，并把返回的數據放入被選元素中。

語法：

$(selector).load(URL,data,callback);

必需的 URL 參數規定加載的 URL。

可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。

可選的 callback 參數是 load() 方法完成后所執行的函數名稱。

三，

1， jquery ajax中的load方法將返回的數據放在指定的元素中，不是全局函數。

2， get()同樣是jquery的ajax的函數，它的作用把返回的數據交給用戶處理，是全局函數

3，load 的實現幾乎等同于get的實現，在ajax獲取機制上沒有區別。

4， load方法的另一個和get 的重要區別：load可以指定要插入文檔的某個部分。

今天的分享就這么多，不知道大家有沒有記住呢，好記性不如爛筆頭，大家要記得收藏哦，覺得不錯也可以分享給身邊的朋友哦，想學習前端的可以私信我領取web視頻教程哦。

在線咨詢

上一篇：iText7實現PDF電子簽章
下一篇：圖庫網站SEO（搜索引擎優化）案例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

端實用特效：javascript制作騰訊新聞輪播小案例

您的項目需求