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

瞅啥？

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

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

不扯淡，上干貨！

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

菜單（需要的材料）：

html語言（處理頁面結(jié)構(gòu)）
css語言（美化頁面）
javaScript語言（讓頁面動(dòng)起來）

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

編寫頁面骨架html

我們在某個(gè)文件夾內(nèi)點(diǎn)擊鼠標(biāo)右鍵，新建一個(gè)文本文件,像這樣
接著我們在里面編寫如下代碼
標(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組
盒子+圖片（http的那個(gè)是圖片地址，不要去手抄喲）
<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>
接著運(yùn)行程序，最簡單的方法就是把剛才的編寫的文件用鼠標(biāo)左鍵托到瀏覽器中再放手,如無意外，你將看到

兄嘚,那么你的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個(gè)div都向左漂浮就好,繼續(xù)在style標(biāo)簽中加入如下代碼
#lun_bo_tu_he_zi div {
float:left;
}
好了，記得Ctrl + S 鍵來保存一下，保存以后，把文件丟到瀏覽器中，你將看到：
接下來還有一個(gè)障礙要掃清（別問為什么，我太難了）
接著我們在style標(biāo)簽中加入
body { margin:0px; }

至此CSS美化就搞定！！！

JavaScript篇

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

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

首先我們先分析一下，咱們現(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向左移動(dòng)，出現(xiàn)圖2，再向左移動(dòng)，出現(xiàn)圖3
ele.style.left=ele.offsetLeft - 200 + 'px';
以上代碼的意思是描述位置：設(shè)置有多靠左=現(xiàn)在有多靠左 - 200（圖片寬）拼接 'px'
每次的移動(dòng)需要間隔1秒再移動(dòng)（代碼是固定格式）
setInterval(function() {
// 你要做的是
},1000)
目前設(shè)置了盒子的left屬性，盒子還不能移動(dòng)，原因是默認(rèn)布局方式類似擺貨架，左邊是墻壁，沒法讓其往左邊移動(dòng)，因此我們給他設(shè)置絕對定位，就可以隨處飛，甚至飛出屏幕外。
那么來吧，理解了就往下寫
ele.style.position='absolute';
ele.style.left='0px';
第一，設(shè)置絕對定位就可以隨便飛absolute（絕對的意思）。第二，設(shè)置一個(gè)它開始的left位置為墻壁靠邊邊（道理類似與有始有終）
整理一下，現(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)在再好了，接下來就是美化的事了：

3個(gè)圖片同時(shí)出現(xiàn)不好看，我們需要出現(xiàn)一個(gè)，則需要把隨著盒子不斷向左移動(dòng)而超出
盒子的內(nèi)容隱藏掉。我們用css給它設(shè)置3個(gè)樣式
#yong_hu_kan {
overflow: hidden;
position: relative;
}
第一個(gè)屬性是超出部分隱藏，第二個(gè)屬性是由于我們之前設(shè)置絕對定位是起飛，因此讓頁面不在知道盒子之間的包含關(guān)系了，因此我們這里聲明一下，也就是#yong_hu_kan和#lun_bo_tu_he_zi的關(guān)系
再來加個(gè)慢慢過渡的效果
針對那個(gè)元素？回答：#lun_bo_tu_he_zi
哪一個(gè)屬性的改變需要過渡？回答：left
過渡時(shí)間放緩，需要幾秒完成？回答：1s
#lun_bo_tu_he_zi {
transition:left 1s;
}

搞定！看效果

寫在最后

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

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

javascript正則實(shí)現(xiàn)QQ空間換膚效果源碼：

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

更加系統(tǒng)的小案例和學(xué)習(xí)方法可以關(guān)注我的微信公眾號(hào)：‘學(xué)習(xí)web前端’關(guān)注后回復(fù)‘給我資料’可以領(lǐng)取一套完整的學(xué)習(xí)視頻

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

，

一、通過CSS3的animation屬性以及 @keyframes規(guī)則實(shí)現(xiàn)。

首先學(xué)習(xí) CSS3當(dāng)中的@keyframes和animation。

@keyframes規(guī)則—用于創(chuàng)建動(dòng)畫，在@keyframes中規(guī)定某個(gè)CSS樣式，就能創(chuàng)建

由當(dāng)前樣式逐漸變成新樣式的動(dòng)畫效果。

瀏覽器支持：

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

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

內(nèi)容：eg：

@keyframes firstAnimation{

from {background: yellow;}

to{ background: red;}

}

// safari和chrome

@-webkit-keyframes firstAnimation{

from {background: yellow;}

to{ background: red;}

} CSS3 動(dòng)畫

用@keyframes規(guī)則傳創(chuàng)建動(dòng)畫時(shí)，需要將其(函數(shù)名)綁定到某個(gè)選擇器，否則不會(huì)產(chǎn)生動(dòng)畫效果。

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

語法：

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

必需的 URL 參數(shù)規(guī)定加載的 URL。

可選的 data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合。

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

三，

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

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

3，load 的實(shí)現(xiàn)幾乎等同于get的實(shí)現(xiàn)，在ajax獲取機(jī)制上沒有區(qū)別。

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

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

在線咨詢

上一篇：iText7實(shí)現(xiàn)PDF電子簽章
下一篇：圖庫網(wǎng)站SEO（搜索引擎優(yōu)化）案例

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

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

您的項(xiàng)目需求