<!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. 2、CentOS7密码重置

    一.重启系统,在开机过程中,快速按下键盘上的方向键↑和↓.目的是告知引导程序,我们需要在引导页面选择不同的操作,以便让引导程序暂停.  以下是暂停后的界面,可以查看下方的英文可知↑和↓的作用.  二. ...

  2. 轮播组件/瀑布流/组合搜索/KindEditor插件

    一.企业官网 ### 瀑布流 ​ Models.Student.objects.all() #获取所有学员信息 ​ 通过div进行循环图片和字幕 ​ 1.以template模板方法实现瀑布流以列为单位 ...

  3. python打包生成可执行文件教程

    python打包生成可执行文件教程 安装环境: 1.打开命令行窗口,输入命令:pip install pyinstaller ,等待下载结束.示例: 2.下载结束后,测试是否成功安装,输入命令:pyi ...

  4. windows本地安装Oracle数据库

    一.下载Oracle 11g R2 for Windows. 官方网站: https://www.oracle.com/database/technologies/oracle-database-so ...

  5. FIB表与RIB表的区别与联系

    RIB (route information base) 和 FIB (forwarding information base),又称Ip路由表 和 CEF表,它们之间的关系可以用下面这张图片来高度概 ...

  6. 【python基础语法】第1天作业练习题

    # 1.下面那些不能作为标识符? """ 1.find 2. _num 3.7val 4.add. 5.def 6.pan 7.-print 8.open_file 9. ...

  7. 如何在Mac电脑上隐藏视频文件？

    我们都有一些秘密视频,我们只想保留在Mac,iPhone或iPad上.为了完全安全地在Mac上隐藏视频文件,我们提供了两种种最简单的方法.下面就来看一下,如何在Mac上隐藏私密视频文件? 在iTune ...

  8. AOV拓扑排序实验总结-1

    AOV拓扑排序实验总结-1   实验数据:1.实验输入数据在input.txt文件中2.对于n是指有顶点n个,数据的结束标志是一行0 0.   实验目的:获取优秀的AOV排序算法模板   数据结构安排 ...

  9. 论文阅读笔记（二十）【AAAI2019】：Spatial and Temporal Mutual Promotion for Video-Based Person Re-Identification

    Introduction (1)Motivation: 作者考虑到空间上的噪声可以通过时间信息进行弥补,其原因为:不同帧的相同区域可能是相似信息,当一帧的某个区域存在噪声或者缺失,可以用其它帧的相同区 ...

  10. Java【第二课 扫描仪 & 布尔数据类型】

    一.Java扫描仪 为了更加方便的理解,我先将逻辑框图 这个有点像C语言的scan()的用法 import java.util.Scanner; //导入扫描仪 public class demo{ ...