<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

			}

			#outer{

				width: 500px;

				margin: 50px auto;

				padding: 10px;

				background-color: greenyellow;

				/*设置文本居中*/

				text-align: center;

			}

		</style>

		<script type="text/javascript">

			window.onload = function(){   //文档全部加载完成后再加载onload函数

				/*

				 * 点击按钮切换图片

				 */

				//获取两个按钮

				var prev = document.getElementById("prev");

				var next = document.getElementById("next");

				/*

				 * 要切换图片就是要修改img标签的src属性

				 */

				//获取img标签，自结束标签返回的是类数组

				var img = document.getElementsByTagName("img")[0]; //HtmlImageElement

				//创建一个数组，用来保存图片的路径

				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];

				//创建一个变量，来保存当前正在显示的图片的索引

				var index = 0;

				//获取id为info的p元素

				var info = document.getElementById("info");

				//设置提示文字

				info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";  //没有货括号会拼串

				//分别为两个按钮绑定单击响应函数

				prev.onclick = function(){

					/*

					 * 切换到上一张，索引自减

					 */

					index--;

					//判断index是否小于0

					if(index < 0){

						index = imgArr.length - 1;

					}

					img.src = imgArr[index];

					//当点击按钮以后，重新设置信息

					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";

				};

				next.onclick = function(){

					/*

					 * 切换到下一张是index自增

					 */

					index++;

					if(index > imgArr.length - 1){

						index = 0;

					}

					//切换图片就是修改img的src属性

					//要修改一个元素的属性 元素.属性 = 属性值

					img.src = imgArr[index];

					//当点击按钮以后，重新设置信息

					info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";

				};

			};

		</script>

	</head>

	<body>

		<div id="outer">

			<p id="info"></p>

			<img src="img/1.jpg" alt="冰棍" />

			<button id="prev">上一张</button>

			<button id="next">下一张</button>

		</div>

	</body>

</html>

JS图片轮换的更多相关文章

  1. js图片轮换播放器

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  2. 使用纯生js实现图片轮换

    效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. JS图片自己主动轮换效果实现

    今天不在状态,五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自己主动轮换效果,先看图片 以下是详细的代码,还是比較简单的. <!DOCTYPE ht ...

  4. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  5. JS图片Switchable切换大集合

    JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...

  6. 仿FLASH的图片轮换效果

    css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...

  7. jquery 图片轮换

    jquery 图片轮换 1.下载jquery.superslide.2.1.1.js (百度搜索) 2.下载Jquery-1.4.1.js(百度搜索下载) 准备工作好了,下面开始实现 3.html & ...

  8. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  9. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

随机推荐

  1. 在本地搭建git服务器

    GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业公司来说,既不想公开源代码,又舍不得给GitHub交保护费,那就只能自己搭建一台Git服务器作为私有仓库使用. 搭建Gi ...

  2. MySQL 8 在一台机器上运行多个MySQL实例

    可以为每个实例使用一个MySQL Server二进制程序,也可以为不同实例使用同一个MySQL Server二进制程序. 不管哪一种选择,部分参数可能需要不同配置,以避免多个实例之间的冲突. 可能需要 ...

  3. 第3种方法获取redis cluster主从关系

    需求:使用cluster slots命令,获取redis cluster 主从对应关系. 说明:cluster slots命令对应的字段说明:http://redis.cn/commands/clus ...

  4. oracle 取某个时间的数据（每周几的上午几点到几点）

    select count(*),t.分组字段 from (select t.* ,to_char(t.时间,'HH24') stime,to_char(t.时间,'HH24mi') fz,to_cha ...

  5. maven的核心概念——继承

    15.1 为什么需要继承机制 由于非compile范围的依赖信息是不能在“依赖链”中传递的,所以有需要的工程只能单独配置.例如: Hello <dependency> <groupI ...

  6. 《Javascript DOM编程艺术》学习笔记 第1-6章

    第1章 Javascript简史 Javascript是Netspace公司与Sun公司合作开发的,Javascript 1.0版于1995年推出. 为与微软公司竞争,Netspace公司和Sun公司 ...

  7. qt 带箭头的直线 （类似viso）

    2020.02.27 本来上传到CSDN,后来想想,我要放弃csdn了.csdn已经跟我分享的精神背道而驰了.想要代码,留邮箱吧. 近来Qt开发时可能遇到这样的需求:两个(或多个)矩形,要用直线将它们 ...

  8. 输出redis cluster 主从的对应关系，如果同一个主从关系的master和slave在同一个node节点上，在输出的对应关系末尾输出提示

    需求:输出redis cluster 主从的对应关系,如果同一个主从关系的master和slave在同一个node节点上,在输出的对应关系末尾输出提示. 为什么会有这样的需求呢?在重新搭建redis ...

  9. LAMP集成环境搭建

    本教程是在centos6.8 64位系统下进行操作 我们首先准备搭建LAMP环境 LAMP指的是Linux.Apache.MySQL 和 PHP 如果要安装PHP5.5 需要 首先rpm -ivh h ...

  10. JS添加和删除表格行

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...