在学习轮播图之前，要先会切换图片：
找三张图片，命名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=& ...
随机推荐
-
用socket实现ping功能（记录）
/* 参考 http://bbs.csdn.net/topics/230001156 原文为win32版本 稍有改动,以适应mac与linux系统 */ #include <stdio.h> ...
-
C#中dynamic的正确用法
C#中dynamic的正确用法 http://www.cnblogs.com/qiuweiguo/archive/2011/08/03/2125982.html dynamic是FrameWork4 ...
-
关于js中的同步和异步
最近看到前端面试问到js中的同步和异步,这个问题该怎么回答? 梳理一下,js对于异步的处理,很多人的第一反应是ajax,这只能说是对了一半. 1.个人觉得,js中,最基础的异步是setTimeout和 ...
-
Data Structures/Algorithms 小甲鱼99讲笔记系列(1~~15讲)
参考资料地址: http://www.icoolxue.com/ 1.数据结构中四种逻辑结构. ① 集合 集合中任何两个数据元素之间都没有逻辑关系,组织形式松散. ② 线性结构 线性结构中的 结点按逻 ...
-
web api返回格式小结
web api返回格式小结: 1.默认是返回xml格式数据,如果需要返回json格式,需要在Global.asax中加入: GlobalConfiguration.Configuration.Form ...
-
sql语句面试总结
1.用一条SQL语句 查询出每门课都大于80分的学生姓名 name kecheng fenshu 张三 语文 81张三 数学 75李四 语文 ...
-
【JavaScript_DOM 淘宝购物车】
让我们一起看一下淘宝的购物车是怎么做的吧,刚刚入门的我可能很多地方的用法都不够优化,不过个人感觉先把逻辑清晰之后再做的话其实也并不难哦, 以下是我做的页面代码: HTML代码: <!DOCTYP ...
-
JS实现数组去重方法大总结
js数组根据对象中的元素去重: var arr2 = [ { name: "name1", num: "1" }, { name: "name2&qu ...
-
selenium截取具体元素图片(python版)
原理: 1.截图(整个窗口) 2.获取此元素坐标 element = driver.find_element_by_id("xx") element.location) 3.获取此 ...
-
Deploying Keras model on Tensorflow Serving--
keras训练了个二分类的模型.需求是把keras模型跑到 tensorflow serving上 (TensorFlow Serving 系统用于在生产环境中运行模型) keras模型转 tenso ...