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

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

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(){   }这个是一个匿名函数,可以直接被调用
相关文章
|
8天前
|
前端开发
CSS实现充电效果案例
CSS实现充电效果案例
20 1
|
9天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
16 4
|
6天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
11天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
26 0
JS配合CSS3实现动画和拖动小星星小Demo
|
18天前
|
前端开发 JavaScript
uniapp动态修改css样式(通过js来修改css样式)
uniapp动态修改css样式(通过js来修改css样式)
|
22天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
9天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)