JavaScript数组实现图片轮播
最终效果
注：图片来源于百度图片
文件结构：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
div{
width: 900px;
height: 400px;
margin: 0 auto;
}
div img{
width: 900px;
height: 400px;
} </style>
<script> function init(){
//window.setTimeout(changeImage,2000);//只调用一次
window.setInterval(changeImage,2000);//每隔2000ms,可以调用多次
}
var pathArr=new Array("../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg"); var index=0;
function changeImage(){
nextImg(); } function preImg(){
myimg=document.getElementById("myimg");
index--; if(index<=0){
index=pathArr.length-1; }
myimg.src=pathArr[index];
}
function nextImg(){
myimg=document.getElementById("myimg");
index++; if(index>=pathArr.length){
index=0;
}
myimg.src=pathArr[index];
} </script> </head>
<body onload="init()">
<p align="center">
<button onclick="preImg()">上一张</button>
<button onclick="nextImg()"> 下一张</button> </p>
<div> <img src="../images/1.jpg" id="myimg" />
</div>
</body>
</html>
JavaScript数组实现图片轮播的更多相关文章
- javaScript 手写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript学习---简易图片轮播
效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...
- HTML纯javaScript代码写图片轮播
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- Bootstrap_Javascript_图片轮播
一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮播图片的容器.在 Bootstrap 框架中采用 carousel 样式,并 ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
- JavaScript对象(document对象 图片轮播)
图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- Javascript图片轮播
原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...
随机推荐
- 【UML】NO.49.EBook.5.UML.1.009-【UML 大战需求分析】- 包图（Package Diagram）
1.0.0 Summary Tittle:[UML]NO.49.EBook.1.UML.1.009-[UML 大战需求分析]- 包图(Package Diagram) Style:DesignPatt ...
- 一份C++学习资源，咬牙切齿地好用呀
多年以后,你已经是一名技术总监,有一个美丽的妻子,两个孩子:你已经拥有了现在的你想都不敢想的一切:那时,你也一定会忘记,今天这篇教程,如同一颗石子,铺就过你前进的路. 下面是我们的老师根据现有资源整理 ...
- nodejs+mysql入门实例（增）
var userAddSql = 'INSERT INTO userinfo(id,username,pwd) VALUES(0,?,?)'; var userAddSql_Params = ['Wi ...
- SQL Server 2014忘记SA密码或禁用而且Windows身份验证也无法登录的解决办法
SQL Server双重验证都无法验证的情况下如何处理 1.以管理员身份运行sql配置管理器 2.打开[Sql Server 服务]节点关掉所有服务 3.双击本地实例[SQL Server (MSSQ ...
- 无法序列化会话状态。在“StateServer”或“SQLServer”模式下，ASP.NET 将序列化会话状态对象，因此不允许使用无法序列化的对象或 MarshalByRef 对象。如果自定义会话状态存储在“Custom”模式下执行了类似的序列化，则适用同样的限制。
将项目部署到服务器后发现有如下问题,查了网上好多说是需要被序列化的类没有写上[Serializable]标志,所以把全部需要序列化的列都写上了标志发现还是不是,最后查到了发现网上说的并不太准确,而是需 ...
- 使用pycharm调试django项目
要使用pycharm调试django 打断点调试后台代码,首先要进行一下配置: 1.debug 配置 打开debug界面 2.选择python点+加号,然后选择python 3.名字debug,这个看 ...
- ob
可以利用ob_get_contens生成静态页面,应用场景 后台生成商品的时候 可以生成对应的前台页面,其他页面直接调用. $result = $goods->create(); if ($re ...
- Unity shader学习之菲涅耳反射
菲涅尔反射(Fresnel reflection),指光线照射物体表面时,一部分发生反射,一部分进入物体内部发生折射或散射,被反射的光和折射光之间存在一定的比率. 2个公式: 1. Schlick 菲 ...
- 福布斯最佳雇主榜：谷歌母公司Alphabet再登榜首 微软次之
http://www.sohu.com/a/259018538_114774 站长之家(ChinaZ.com) 10月12日 消息:在福布斯发布的最新全球最佳雇主榜单中,谷歌母公司Alphabet以满 ...
- <1>lua编译环境 数据类型和局部变量
1.编译环境 http://www.lua.org/download.html下载 解压后 bin目录中lua.exe运行 luac.exe编译成lua字节码 2.基本数据类型 整数,小数,布尔值 ...