成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

html學(xué)習(xí)之路--簡單圖片輪播

番茄西紅柿 / 3006人閱讀

摘要：一個簡單的圖片輪播效果頁面代碼，基本的結(jié)構(gòu)，在中顯示圖片，此處圖片依次命名為。簡單圖片輪播然后對網(wǎng)頁進(jìn)行一個非常簡單的美化。具體到元素標(biāo)簽最后是文件對圖片輪播進(jìn)行控制。

一個簡單的圖片輪播效果

photo.html頁面代碼，基本的HTML結(jié)構(gòu)，在main中顯示圖片，此處圖片依次命名為1.jpg、2.jpg、3.jpg、4.jpg。

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>簡單圖片輪播title>
 6         <link rel="stylesheet"href="css/photo.css">
 7     head>
 8     <body>
 9         <div class="warpper">
10             <div class="header">
11                 <div class="logo">photos of tutujdiv>
12             div>
13             <div class="main">
14                 <div id="pics">
15                     <img src="img/1.jpg"/>
16                 div>
17             div>
18             <div class="footer">div>
19         div>
20     body>
21 html>
22 <script src="js/photo.js">script>

然后對網(wǎng)頁進(jìn)行一個非常簡單的CSS美化。

.logo{
    font-size:18px;
    color:brown;
    background-color: #F0F8FF;
    font-family: "calisto mt";
}
/* 具體到元素標(biāo)簽 */
#pics img{
    margin-top:10px;
    width:300px;
    height:300px;
}

最后是js文件對圖片輪播進(jìn)行控制。

//獲取內(nèi)容
var pics=document.getElementById("pics");
var n=1;
setInterval(function(){
    if(n>4) n=1;
    pics.innerHTML="<img src=img/"+n+".jpg/>";
    n++;
},1000);

最后的效果是每隔一秒對圖片進(jìn)行變換，變換到最后一幅時再從第一幅開始變換。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1018.html

相關(guān)文章

  • 前端常用插件、工具類庫匯總

    摘要：頁面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布，錯誤監(jiān)控上報，用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具，是針對移動端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。 本人微信公眾號：前端修煉之路，歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....

    GitCafe 評論0 收藏0

  • 手把手和你用原生JS寫一個循環(huán)播放圖片輪播

    摘要：前段時間學(xué)習(xí)了淘寶首頁的靜態(tài)頁面，其中收獲較大的的就是這個循環(huán)播放的圖片輪播組件，本文就將相關(guān)制作經(jīng)驗分享給大家。作為演示，用標(biāo)簽代替了圖片。關(guān)鍵使用不同背景色的替代圖片。 前段時間學(xué)習(xí)了淘寶首頁的靜態(tài)頁面，其中收獲較大的的就是這個循環(huán)播放的圖片輪播組件，本文就將相關(guān)制作經(jīng)驗分享給大家。 先看看在線DEMO：原生JS循環(huán)播放圖片輪播組件?（支持IE8+，本文中的在線demo均未經(jīng)過壓縮...

    enda 評論0 收藏0

  • 手把手和你用原生JS寫一個循環(huán)播放圖片輪播

    摘要：前段時間學(xué)習(xí)了淘寶首頁的靜態(tài)頁面，其中收獲較大的的就是這個循環(huán)播放的圖片輪播組件，本文就將相關(guān)制作經(jīng)驗分享給大家。作為演示，用標(biāo)簽代替了圖片。關(guān)鍵使用不同背景色的替代圖片。 前段時間學(xué)習(xí)了淘寶首頁的靜態(tài)頁面，其中收獲較大的的就是這個循環(huán)播放的圖片輪播組件，本文就將相關(guān)制作經(jīng)驗分享給大家。 先看看在線DEMO：原生JS循環(huán)播放圖片輪播組件?（支持IE8+，本文中的在線demo均未經(jīng)過壓縮...

    dendoink 評論0 收藏0

  • 手把手和你用原生JS寫一個循環(huán)播放圖片輪播

    摘要：前段時間學(xué)習(xí)了淘寶首頁的靜態(tài)頁面，其中收獲較大的的就是這個循環(huán)播放的圖片輪播組件，本文就將相關(guān)制作經(jīng)驗分享給大家。作為演示，用標(biāo)簽代替了圖片。關(guān)鍵使用不同背景色的替代圖片。 前段時間學(xué)習(xí)了淘寶首頁的靜態(tài)頁面，其中收獲較大的的就是這個循環(huán)播放的圖片輪播組件，本文就將相關(guān)制作經(jīng)驗分享給大家。 先看看在線DEMO：原生JS循環(huán)播放圖片輪播組件?（支持IE8+，本文中的在線demo均未經(jīng)過壓縮...

    gityuan 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<