輪播圖心得

輪播圖

寫輪播圖之前我們要認(rèn)識到幾個(gè)問題:
一火本、什么是輪播圖?
二蓄喇、怎么實(shí)現(xiàn)輪播效果发侵?
三、輪播圖還有什么小功能可以實(shí)現(xiàn)妆偏?
那好我們先理解一下什么是輪播圖:

一刃鳄、什么是輪播圖:能夠?qū)崿F(xiàn)多張圖片循環(huán)出現(xiàn)效果的我們稱之為輪播圖。

例如:



上圖就是輪播圖钱骂,圖片中兩張圖片正在替換著出現(xiàn)叔锐。

二、怎么實(shí)現(xiàn)輪播效果见秽?

要實(shí)現(xiàn)輪播圖的效果有很多種方法愉烙,比如css3、框架解取、JavaScript等步责。
而今天我們要看的是我個(gè)人覺得最簡單的一種方法,即使是初學(xué)者也可以看懂并理解的方法禀苦,我們先來看下代碼:

<body>
  
    ![](../img/1.jpg)<!-- 插入圖片并設(shè)置圖片的大小 -->
</body>
    <script>
    var tu=document.getElementById("tu");   //獲取到id
    var x=1;                             //定義一個(gè)變量x
      function bian(){               //定義一個(gè)叫bian的function方法
        x=x+1;                       //讓變量每次加一
        if (x>6){x=1}        //判斷當(dāng)播放到最后一張是切換到第一張
        tu.src="img/"+x+".jpg";      //替換id為tu的src (因?yàn)檫@里要換圖片所以要用到變量x蔓肯,所以這里要用字符拼接)
    }
    setInterval(bian,1000); //給bian這個(gè)方法加上定時(shí)器時(shí)間為1000毫秒 </script>

在上面的html中我們可以看到這個(gè)方法是通過src途徑的圖片命名更改來實(shí)現(xiàn)輪播效果的,那么這里的限制就比較多振乏,例如:圖片的格式可能會不同蔗包、每張圖片都必須進(jìn)行有規(guī)律的命名等。
但是這對于初學(xué)者而言是比較好的一中方式慧邮,能讓他們在通過簡單的代碼來實(shí)現(xiàn)這樣的一個(gè)效果调限,更能激發(fā)他們學(xué)習(xí)的欲望。

三误澳、輪播圖還有什么小功能可以實(shí)現(xiàn)耻矮?

其他小功能包括:左右的按鈕的點(diǎn)擊切換,圖片下小圓點(diǎn)的點(diǎn)擊切換以及自動切換
這些小功能的實(shí)現(xiàn)我們明天繼續(xù)學(xué)習(xí)脓匿!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末淘钟,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌米母,老刑警劉巖勾扭,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異铁瞒,居然都是意外死亡妙色,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門慧耍,熙熙樓的掌柜王于貴愁眉苦臉地迎上來身辨,“玉大人,你說我怎么就攤上這事芍碧』蜕海” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵泌豆,是天一觀的道長定庵。 經(jīng)常有香客問我,道長踪危,這世上最難降的妖魔是什么蔬浙? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮贞远,結(jié)果婚禮上畴博,老公的妹妹穿的比我還像新娘。我一直安慰自己蓝仲,他們只是感情好俱病,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著袱结,像睡著了一般庶艾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上擎勘,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天,我揣著相機(jī)與錄音颖榜,去河邊找鬼棚饵。 笑死,一個(gè)胖子當(dāng)著我的面吹牛掩完,可吹牛的內(nèi)容都是我干的噪漾。 我是一名探鬼主播硝全,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼拐叉,長吁一口氣:“原來是場噩夢啊……” “哼梗夸!你這毒婦竟也來了莱坎?” 一聲冷哼從身側(cè)響起婴栽,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎裸燎,沒想到半個(gè)月后蚁滋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡焦匈,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年血公,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缓熟。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡累魔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出够滑,到底是詐尸還是另有隱情垦写,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布彰触,位于F島的核電站梯投,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏渴析。R本人自食惡果不足惜晚伙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望俭茧。 院中可真熱鬧咆疗,春花似錦、人聲如沸母债。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽毡们。三九已至迅皇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間衙熔,已是汗流浹背登颓。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留红氯,地道東北人框咙。 一個(gè)月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像痢甘,于是被迫代替她去往敵國和親喇嘱。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,745評論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫塞栅、插件者铜、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評論 4 62
  • 輪播圖實(shí)現(xiàn)想法 輪播圖一個(gè)基礎(chǔ)的js動畫效果,我感覺很low了,其一都在用作烟,其二原理都差不多愉粤,其三我沒有心得啊K滓肌科汗!...
    Nicholas明閱讀 744評論 0 1
  • 森林深處有個(gè)神秘的晚安小鎮(zhèn),高大濃密的樹木成了小鎮(zhèn)的天然屏障绷雏,沒有人可以發(fā)現(xiàn)這個(gè)藏在深處的秘密樂園头滔。 小鎮(zhèn)的鎮(zhèn)長是...
    洋蔥絲閱讀 501評論 7 3
  • 讀書筆記之紅樓夢第六回 賈寶玉初試云雨情劉姥姥一進(jìn)榮國府 讀此回,對寶玉和襲人初試云雨的嬌羞以及鳳姐為人處世的玲瓏...
    echozyp閱讀 12,813評論 0 3