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"><!--图片展示区--> & ...
随机推荐
- script命令录屏
关于linux上的操作,我们的确可以使用'history'命令来显示出来操作记录,但是有些时候,我们不仅仅需要知道做了什么,还需要知道操作的时候,产生了什么效果,这个时候‘history’命令就显示无 ...
- unicode gbk utf-8的差异
GB2312(1980年)定义,包含6763个汉字,682个字符 GBK1.0 定义了21003个汉字,21886个字符 ASCII->GB2312->GBK 编码方式向后兼容,即同一个字 ...
- Go web ajax project
这个是本人学习之用,比较乱 我也不知道这是在教大家什么,但如果你能看懂,那你就能真正干活了 //https-ajax.go package main import ( "fmt" ...
- python中参数传递之位置传递、关键字传递、包裹传递与解包裹
原文地址https://blog.csdn.net/love666666shen/article/details/77131487 1.位置与关键字传递 (1)位置传递:先用形式参数定义,然后在调用时 ...
- jenkins构建多个项目执行顺序设置
通常我们会在jenkins中构建多个项目,那么如果项目有依赖,或者有关联怎么办? 例: 如下图: ,有两个构建项目,posWeb是个web项目,welife是接口项目. 由于接口项目数据会影响pos ...
- sqli-labs(十一)（二次注入）
第二十四关: 这关考验的是sql的二次注入. 这关是一个登陆加注册的功能点,登陆的地方没有注入,账号密码都输入输入'",页面只会显示登陆失败. 但注册账号的地方没有做过滤可以注册带有单引符号 ...
- jQuery-切换2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- java空心菱形
图 1 要输出如图1所示的菱形,第一反应是看看这个菱形有什么特点.在草稿纸上比划了半天,将图1转化成了图2用数字表示的图 图 2 比较图1和图2发现有以下特点: (1)图2中的每一个数字代表图1中每个 ...
- 大话设计模式C++ 备忘录模式
备忘录(Memento):在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将对象恢复到原先保存的状态. 角色: (1)Originator(发起人):创建盒子, ...
- 【转】 如何导入excel数据到数据库，并解决导入时间格式问题
在办公环境下,经常会用到处理excel数据,如果用写程序导入excel数据到数据库那就太麻烦了,涉及解析excel,还要各种格式问题,下面简单利用数据库本身支持的功能解决这类导入问题. 准备 创建表 ...