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"><!--图片展示区--> & ...
随机推荐
- 【LeetCode每天一题】Generate Parentheses(创造有效的括弧)
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...
- Git Your branch is ahead of 'origin/master' by X commits解决方法
(1)方法1:git fetch origin (2)方法2(代码还需要):git push origin (3)方法3 (代码不需要):git reset --hard origin/$branch ...
- laravel架构
1.Laravel 5.1 中的异常处理器和HTTP异常处理实例教程 http://laravelacademy.org/post/1867.html 2.laravel 集成sentry,sentr ...
- PLSQL乱码
PLSQL乱码 博客分类: oracle oracleplsql乱码 问题:PL/SQL插入和更新乱码. 解决乱码问题需要关注的三点: 1. Oracle数据库内部的字符集 2. Oracle客户端 ...
- Lua之table
Lua table(表) 参考:http://www.runoob.com/lua/lua-tables.html table 是 Lua 的一种数据结构用来帮助我们创建不同的数据类型,如:数字.字典 ...
- 终极解决liunx GUI 无法显示中文的问题。
为linux安装字体 Linux字体文件放在/usr/share/font/,只要将字体文件拷贝到这里就可以了.这里示例安装Windows的所有字体. 2,复制Windows下 的所有字体.cd命令切 ...
- table 的rolspan和rowspan
如图所示啦,容易让初学者混乱的两个东西仔细看看分析下呢,就比较简单了 <table width="300" border="2"> <tr&g ...
- javascript（二）：数据类型&数值
第一部分:数据类型 javascript数据类型通常来说是6种(ES6新增第七种Symbol类型) number:数值 string:字符串 boolean:布尔类型,true或false undef ...
- Necklace of Beads （polya定理的引用）
Beads of red, blue or green colors are connected together into a circular necklace of n beads ( n &l ...
- 【转】Loadrunder场景设计篇——添加windows Resource计数器和指标说明
转至:https://www.cnblogs.com/langhuagungun/p/8488270.html Loadrunder场景设计篇——添加windows Resource计数器和指标说明 ...