JS应用实例2:轮播图
在学习轮播图之前,要先会切换图片:
找三张图片,命名1.jpg,2.jpg,3.jpg
示例:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>切换图片</title>
<style>
div {
border: 1px solid white;
width: 500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script>
var i = 1; function changeImg() {
i++;
document.getElementById("img1").src = "./img/" + i + ".jpg";
if(i == 3) {
i = 0;
}
}
</script>
</head> <body>
<div>
<input type="button" value="下一张" onclick="changeImg()" />
<img src="./img/1.jpg" width="100%" height="100%" id="img1" />
</div>
</body> </html>
上面代码是通过按钮切换图片
轮播图自动切换图片,用到onload事件
JS代码:
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
} //函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="./img/"+i+".jpg";
if(i==3){
i=0;
}
}
HTML代码:
这里要注意:onload写在body标签中
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
div {
border: 1px solid white;
width: 500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script>
function init(){
//书写轮图片显示的定时操作
window.setInterval("changeImg()",1000);
}
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="./img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head> <body onload="init()">
<div>
<input type="button" value="下一张" onclick="changeImg()" />
<img src="./img/1.jpg" width="100%" height="100%" id="img1" />
</div>
</body> </html>
每一秒自动切换一张图片
JS应用实例2:轮播图的更多相关文章
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- 实例练习——轮播图 & 全选/全不选
1 实例1:轮播图 1)实质就是改变图片的src 2)把图片的路径用数组存起来 3) “下一张”的实现就是改变数组的下标,用一个变量i控制,每次点击下标加1.“上一张”的实现正好相反.注意“i的变化” ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- JS框架_(Bootstrap.js)实现简单的轮播图
Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- js原声代码 轮播图
js轮播图 html部分:建立div,内嵌img标签,可以设置大小, <!doctype html> <html> <head> <meta charset= ...
- js 自适应手机电脑 轮播图
自己写了一个javascript的可循环轮播图,支持手机滑动,不过代码着实小白,全局变量,函数调用满天飞,研究别的代码规范好的轮播图插件,表示看得懂但是写不出.. HTML: <div id=& ...
随机推荐
- API接口认证
restful API接口可以很方便的让其他系统调用,为了让指定的用户/系统可以调用开放的接口,一般需要对接口做认证; 接口认证有两种方式: 1.认证的token当做post/get的参数,serve ...
- JAVA算术运算符
算术运算符 +.-.*(乘号)./(除号,取商).%(取余数.取模) 特殊的运算符:++(加加).--(减减) int a = 1; a+=10; 等同于a=a+10; a-=5; 等同于a= ...
- MFC笔记3
1. C6有默认的提示代码功能,但是其默认的快捷键是Ctrl + Space,这一般情况下是切换输入法快捷键,所以,只需重新设置一下快捷键就可以实现提示代码功能,具体设置位置如下: 工具(T) -&g ...
- 使用JavaMail发送邮件-从FTP读取图片并添加到邮件正文发送
业务分析: 最近工作需要,需要从FTP读取图片内容,添加到邮件正文发送.发送邮件正文,添加附件采用Spring的MimeMessageHelper对象来完成,添加图片也将采用MimeMessageHe ...
- 20175314 《Java程序设计》第四周学习总结
20175314 <Java程序设计>第四周学习总结 教材学习内容总结 每个子类只能有一个父类,而一个父类可以有多个子类.可以使用关键字extends来定义一个类的子类:class 子类名 ...
- MongoDB入门(一)
文档 文档是MongoDB中的基本数据结构,型如:{"name":"Jack","lastname":"xi"} 键值对 ...
- C#删除文件夹以及删除文件
public static void DelectDir(string srcPath) { try { DirectoryInfo dir = new DirectoryInfo(srcPath); ...
- Git 分支合并:合并某次提交
有时只想合并其它分支到某次提交,而不是所有提交. 一 切换到当前分支 首先,在做一次可能有冲突的合并前尽可能保证工作目录是干净的. 如果你有正在做的工作,要么提交到一个临时分支要么储藏它. 这使你可以 ...
- io.netty.resolver.dns.DnsNameResolverContext
java.net.UnknownHostException: failed to resolve 'xxx.com' after 3 queries at io.netty.resolver.dns. ...
- Django实现支付宝支付
一 去支付宝申请 - 正式:营业执照 - 测试: 沙箱测试环境 APPID:2016092000554391 买家: esnrce2727@sandbox.com 登录和支付密码: ...