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

番茄西紅柿發(fā)布于2019-04-23 11:41 / 2936人閱讀

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

一個(gè)簡(jiǎ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>簡(jiǎn)單圖片輪播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>

然后對(duì)網(wǎng)頁進(jìn)行一個(gè)非常簡(jiǎ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文件對(duì)圖片輪播進(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);

最后的效果是每隔一秒對(duì)圖片進(jìn)行變換，變換到最后一幅時(shí)再?gòu)牡谝环_始變換。

云服務(wù)器 GPU云服務(wù)器 html簡(jiǎn)單輪播圖片輪播html 簡(jiǎn)單輪播代碼機(jī)器學(xué)習(xí)學(xué)習(xí)之路

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1018.html

相關(guān)文章

前端常用插件、工具類庫(kù)匯總

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

GitCafe 2019-08-23 13:57 評(píng)論0 收藏0
手把手和你用原生JS寫一個(gè)循環(huán)播放圖片輪播

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

enda 2019-08-20 17:07 評(píng)論0 收藏0
手把手和你用原生JS寫一個(gè)循環(huán)播放圖片輪播

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

dendoink 2019-08-29 12:43 評(píng)論0 收藏0
手把手和你用原生JS寫一個(gè)循環(huán)播放圖片輪播

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

gityuan 2019-08-01 16:56 評(píng)論0 收藏0