html學習之路--簡單圖片輪播

番茄西紅柿發布于2019-04-23 11:41 / 2942人閱讀

摘要：一個簡單的圖片輪播效果頁面代碼，基本的結構，在中顯示圖片，此處圖片依次命名為。簡單圖片輪播然后對網頁進行一個非常簡單的美化。具體到元素標簽最后是文件對圖片輪播進行控制。

一個簡單的圖片輪播效果

photo.html頁面代碼，基本的HTML結構，在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>

然后對網頁進行一個非常簡單的CSS美化。

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

最后是js文件對圖片輪播進行控制。

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

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

云服務器 GPU云服務器 html簡單輪播圖片輪播html 簡單輪播代碼機器學習學習之路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1018.html

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

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

GitCafe 2019-08-23 13:57 評論0 收藏0
手把手和你用原生JS寫一個循環播放圖片輪播

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

enda 2019-08-20 17:07 評論0 收藏0
手把手和你用原生JS寫一個循環播放圖片輪播

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

dendoink 2019-08-29 12:43 評論0 收藏0
手把手和你用原生JS寫一個循環播放圖片輪播

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

gityuan 2019-08-01 16:56 評論0 收藏0