零基础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(){   }这个是一个匿名函数,可以直接被调用
相关文章
|
1天前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
1天前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
1天前
|
前端开发
CSS:一篇教会你用CSS装饰你的HTML文本
CSS:一篇教会你用CSS装饰你的HTML文本
|
4天前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
14 2
|
4天前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
13 0
|
4天前
|
前端开发 JavaScript 搜索推荐
HTML标签是如何定义网页内容的显示方式的?
【6月更文挑战第28天】HTML标签是如何定义网页内容的显示方式的?
9 2
|
6天前
|
移动开发 HTML5
HTML5网页成品(普洱茶购买)
HTML5网页成品(普洱茶购买)
|
6天前
|
前端开发 JavaScript
HTML+CSS+JS 倒计时动画效果
HTML+CSS+JS 倒计时动画效果
|
6天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
2月前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。