零基础html5+div+css+js网页开发教程第010期图片轮播案例

刘金玉编程

发布于 2019-12-10 17:55:16

1.8K0

发布于 2019-12-10 17:55:16

文章被收录于专栏：编程创造城市编程创造城市

本节知识视频教程

视频内容

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(){ }这个是一个匿名函数，可以直接被调用

素材：

源代码：

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%;
}

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-11-26，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自编程创造城市微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度