零基础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(){   }这个是一个匿名函数,可以直接被调用
相关文章
|
16天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
4天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
4天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
10天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
52 6
|
27天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
24 4
|
1月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
1月前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
38 0
|
JavaScript 前端开发 API
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
175 0
|
JavaScript 前端开发 Java
|
JavaScript 前端开发 Java