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
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
新闻资讯 更多
- 【建站知识】查询nginx日志状态码大于400的请求并打印整行04-03
- 【建站知识】Python中的logger和handler到底是个什么?04-03
- 【建站知识】python3拉勾网爬虫之(您操作太频繁,请稍后访问)04-03
- 【建站知识】xpath 获取meta里的keywords及description的方法04-03
- 【建站知识】python向上取整以50为界04-03
- 【建站知识】scrapy xpath遇见乱码解决04-03
- 【建站知识】scrapy爬取后中文乱码,解决word转为html 时cp1252编码问题04-03
- 【建站知识】scrapy采集—爬取中文乱码,gb2312转为utf-804-03