怎么用html5+div+css+js实现图片轮播功能

发布时间：2021-08-25 18:15:59 阅读：455 作者：chen 栏目：大数据

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

本篇内容主要讲解“怎么用html5+div+css+js实现图片轮播功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用html5+div+css+js实现图片轮播功能”吧!

1.图片标签

<img />标签

用来显示图片的标签。它的Src属性用来设置图片来源，其实也可以直接设置width来设置图片的宽度，设置height来是指图片的高度。值得注意的是，图片的宽度一旦设置以后，图片的高度会自动按图片比例进行缩放。

2.脚本标签

<script>标记

这里开始写js代码，这个代码用来控制网页上面html标签的逻辑，俗称DOM控制。

注释的标记 //单行注释 /* ….. */ 多行注释

2.1逻辑

这里有个图片切换的逻辑控制，就是n变量的变化。

n++ 意义是 n=n+1 用来切换图片名称

2.2 dom控制

document.getElementById(“对应html中标签的ID的值”) 返回一个对应的标签对象。

innerHTML表示某个容器内部所有的html代码。

3.符号与html中的对应关系

符号对应。

空格对应到url中是20%

4.总结

1、学会下载图片制作图片
2、写js，最好能去学习零基础VB教程，如果没有经历，那么就照着写
3、多写，要实践
4、setInterval来做定时器，参数1是个函数，参数2是时间（毫秒）
5、function(){ }这个是一个匿名函数，可以直接被调用

素材：

怎么用html5+div+css+js实现图片轮播功能

源代码：

index.html文件

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>首页-刘金玉编程</title>    <link rel="stylesheet" href="css/main.css" />  </head>  <body>    <div class="wrapper">      <div class="header">        <div class="logo">刘金玉编程</div>      </div>      <div class="main">        <div id="pics">          <img src="img/a%20(1).jpg" />        </div>      </div>      <div class="footer"></div>    </div>  </body></html><script src="js/main.js"></script>

main.css文件

body{  margin:0;}.logo{  color:white;  font-weight: bolder;  padding:10px;  font-size: 20px;  background-color: #9ACD32;}#pics img{  width: 100%;}

到此，相信大家对“怎么用html5+div+css+js实现图片轮播功能”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

怎么用html5+div+css+js实现图片轮播功能

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签