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

时间:2024年03月03日

/

来源:网络

/

编辑:佚名

一个简单的图片轮播效果代码
photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg、2.jpg、3.jpg、4.jpg。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单图片轮播</title>
        <link rel="stylesheet"href="css/photo.css">
    </head>
    <body>
        <div class="warpper">
            <div class="header">
                <div class="logo">photos of tutuj</div>
            </div>
            <div class="main">
                <div id="pics">
                    <img src="img/1.jpg"/>
                </div>
            </div>
            <div class="footer"></div>
        </div>
    </body>
</html>
<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);
html+css网页轮播图片动画教程 一小时包教会网页教程
https://www.bilibili.com/video/BV17T4y137ai?share_source=copy_web
猜你需要

豫ICP备2021026617号-1  豫公网安备:41172602000185   Copyright © 2021-2028 www.78moban.com/ All Rights Reserved

本站作品均来自互联网,转载目的在于传递更多信息,并不代表本站赞同其观点和对其真实性负责。如有侵犯您的版权,请联系 1565229909#qq.com(把#改成@),我们将立即处理。