【JavaScript】案例二：使用JS完成首页轮播图效果——事件（onclick&onload)
1.切换图片例子：
事件（onclick）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>切换图片</title>
<style>
div {
border: 1 px solid white;
width: 500px;
height: 350px;
margin: auto; /**文字居中*/
text-align: center;
}
</style>
</head>
<script>
var i = 1;
function changeImg() {//两张图片循环播放
i++;
document.getElementById("img1").src = "../../img/" + i + ".jpg";
if (i == 2) {
i = 0;
}
}
</script> <body>
<div>
<input type="button" value="下一张" onclick="changeImg()" />
<img src="../../img/1.jpg" width="" id="img1" />
</div>
</body> </html>
结果：
2.轮播图
技术分析：
*注意点：
- 在body标签内写onload
- window.setInterval("changeImg()", 3000); //window可以省略不写
- document.getElementById("img1").src = "../img/" + i + ".jpg"; /**获取图片位置并设置src属性值*/
<script>
function init() {
//书写轮播图片显示的定时操作(3秒)
window.setInterval("changeImg()", 3000); //window可以省略不写
} //书写函数
var i = 0; function changeImg() {
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src = "../img/" + i + ".jpg";
if (i == 2) {
i = 0;
}
}
</script>
<body onload="init()">
<!--3.轮播图片-->
<div id="">
<img src="../img/1.jpg" width="100%" id="img1" /><!--记得加上id-->
<!--设置id-->
</div>
【JavaScript】案例二：使用JS完成首页轮播图效果——事件（onclick&onload)的更多相关文章
- JavaScript学习——使用JS实现首页轮播图效果
1.相关技术 获取元素 document.getElementById(“id 名称”) 事件(onload) 只能写一次并且放到body标签中 定时操作:setInterval(“changeImg ...
- 使用JS完成首页轮播图效果
获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...
- 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
- celery介绍、架构、快速使用、包结构，celery执行异步、延迟、定时任务，django中使用celery，定时更新首页轮播图效果实现，数据加入redis缓存的坑及解决
今日内容概要 celery介绍,架构 celery 快速使用 celery包结构 celery执行异步任务 celery执行延迟任务 celery执行定时任务 django中使用celery 定时更新 ...
- 用jQuery实现优酷首页轮播图
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
- 关于用jQuery知识来实现优酷首页轮播图！
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
- 商城05——首页轮播图显示实现&Redis环境搭建&Redis实现缓存
1. 课程计划 1.首页轮播图的展示 2.首页大广告展示流程图 3.Redis的常用命令 4.Redis的服务器搭建 (集群的搭建) 5.向业务逻辑中添加缓存 6.Jedis的使用(redis的客 ...
- web手工项目02-注册功能输入分析，处理，输出方法-测试用例及缺陷编写-首页轮播图和购物车
web手工项目第二天笔记 昨日回顾 搭建测试环境(WAMP,phpStudy,tpshop项目文件) 熟悉项目(四个步骤,三个来源) 项目测试流程(需求评审,测试计划与方案,测试用例设计与评审,测试执 ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
随机推荐
- odoo fields_view_get
odoo fields_view_get创建动态视图方法 odoo fields_view_get方法是一个比较有用比较灵活的广泛,如果使用得当,可以做到一些常规方法无法实现的功能,本文列举若干种用 ...
- linux中sleep函数的使用和总结
在linux编程中,有时候会用到定时功能,常见的是用sleep(time)函数来睡眠time秒:但是这个函数是可以被中断的,也就是说当进程在睡眠的过程中,如果被中断,那么当中断结束回来再执行该进程的时 ...
- Codeforces.1029D.Isolation(DP 分块)
题目链接 \(Description\) 给定长为\(n\)的序列\(A_i\)和一个整数\(K\).把它划分成若干段,满足每段中恰好出现过一次的数的个数\(\leq K\).求方案数. \(K\le ...
- DVWA XSS (Reflected) 通关教程
XSS 介绍XSS,全称Cross Site Scripting,即跨站脚本攻击,某种意义上也是一种注入攻击,是指攻击者在页面中注入恶意的脚本代码,当受害者访问该页面时,恶意代码会在其浏览器上执行,需 ...
- python3 获取当前日期的时间戳，以及n天后的日期时间戳
#coding=utf- import time import datetime t=datetime.datetime.now() #当前日期 t1 =t.strftime('%Y-%m-%d 00 ...
- 热情组——项目冲刺 Day2
项目相关 作业相关 具体描述 班级 班级链接 作业要求 链接地址 团队名称 热情组 作业目标 实现软件的生成,以及在福大的传播 Github链接 链接地址 SCRUM部分: 成员昵称 昨日目标 开始时 ...
- .NET Core WebApi帮助文档使用Swagger生成Api说明文档
Swagger也称为Open API,Swagger从API文档中手动完成工作,并提供一系列用于生成,可视化和维护API文档的解决方案.简单的说就是一款让你更好的书写API文档的框架. 我们为什么选择 ...
- [转帖]k8s 中的服务如何沟通
k8s 中的服务如何沟通 https://www.jianshu.com/p/9fae09876eb7 本文将介绍 k8s 中的服务如何相互访问,例如后端服务访问数据库,不同类型的服务间的相互访问.并 ...
- 蒙特卡罗方法、蒙特卡洛树搜索（Monte Carlo Tree Search，MCTS）初探
1. 蒙特卡罗方法(Monte Carlo method) 0x1:从布丰投针实验说起 - 只要实验次数够多,我就能直到上帝的意图 18世纪,布丰提出以下问题:设我们有一个以平行且等距木纹铺成的地板( ...
- Scala 系列（五）—— 集合类型综述
一.集合简介 Scala中拥有多种集合类型,主要分为可变的和不可变的集合两大类: 可变集合: 可以被修改.即可以更改,添加,删除集合中的元素: 不可变集合类:不能被修改.对集合执行更改,添加或删除操作 ...