html学习之路--简单图片轮播

番茄西红柿发布于2019-04-23 11:41 / 2839人阅读

摘要：一个简单的图片轮播效果页面代码，基本的结构，在中显示图片，此处图片依次命名为。简单图片轮播然后对网页进行一个非常简单的美化。具体到元素标签最后是文件对图片轮播进行控制。

一个简单的图片轮播效果

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);

最后的效果是每隔一秒对图片进行变换，变换到最后一幅时再从第一幅开始变换。

服务器托管 idc机房托管 html简单轮播图片轮播html 简单轮播代码机器学习学习之路

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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