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

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

  • 相关阅读:
    js/css 伪类, 获取伪类样式
    JS 盒子模型
    python坑之input获取字符串
    configpraser模块
    类的特殊成员&反射&异常处理
    面向对象
    员工信息表
    re正则表达式
    PyCharm教程
    递归实现jsonTree
  • 原文地址:https://www.cnblogs.com/tutuj/p/10647883.html
Copyright © 2011-2022 走看看