zoukankan      html  css  js  c++  java
  • html学习之路--简单图片轮播

    一个简单的图片轮播效果

    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 tutuj</div>
    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;
        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);

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

  • 相关阅读:
    ntp网络时间服务搭建
    Docker虚拟化容器的使用
    第06章 Linux文件权限体系讲解
    Linux命令总结--sed命令
    Linux命令总结--date命令
    第05章 正则表达式及相关命令
    子网划分
    第04章系统目录结构知识讲解
    第03章Linux基础优化
    2.5linux命令介绍
  • 原文地址:https://www.cnblogs.com/tutuj/p/10647883.html
Copyright © 2011-2022 走看看