<!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. 推荐一款疫情期间适合在家办公的远程工具，仅需IP和密码轻松实现远程管理

    这段时间,受疫情影响,很多企业都开启了居家办公模式.但疫情突发,大多数人的办公资料没有拷贝打包,对于居家办公的人,尤其是运维人员来说,很难完成顺利完成工作. 像向日葵.teamviewer之类的远程软 ...

  2. Webdriver启动Firefox浏览器后，页面显示空白

    在使用pycharm码代码时编译总是出错,后来验证发现浏览器启动后出现问题.白白耗了我2个小时.我把我的解决方案写出来,希望对大家有帮助. 1.现象:起初安装的时候总是能正常运行,有一天突然发现Web ...

  3. 5.Python安装依赖(包)模块方法介绍

    1.前提条件 1). 确保已经安装需要的Python版本 2). 确保已经将Python的目录加入到环境变量中 2. Python安装包的几种常用方式 1). pip安装方式(正常在线安装) 2). ...

  4. #《Essential C++》读书笔记# 第二章 面向过程的编程风格

    基础知识 函数必须先被声明,然后才能被调用(被使用).函数的声明让编译器得以检查后续出现的使用方式是否正确--是否有足够的参数.参数类型是否正确,等等.函数声明不必提供函数体,但必须指明返回类型.函数 ...

  5. TCP/IP详解阅读记录----第二章 数据链路层

    1.以太网     以太网是当今TCP/IP采用的主要的局域网技术.它采用一种称作CSMA/CD的媒体接入方法,其意思是带冲突检测的载波侦听多路接入.它的速率为10Mb/s,地址为48bit. 2.I ...

  6. 1.Android网络编程-HTML介绍

    1.HTML介绍 超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 在Eclipse下则可以使用自带的浏览器浏览html: 2.H ...

  7. vue使用JSEncrypt实现rsa加密及挂载方法

    挂载全局方法 使用jsencrypt进行rsa加密 原文链接:Js参数RSA加密传输,jsencrypt.js的使用 - CSDN博客* https://blog.csdn.net/p31201115 ...

  8. Android实战项目——家庭记账本（四）

    今天是开发的第四天,完成的主要内容如下: 1.账单查询功能的完善以及查询结果的显示和编辑 2.侧边栏布局的实现 3.首页fragment中本月与上月对比账目情况 实现的效果如图: 已添加的账单内容以及 ...

  9. 【MVC+EasyUI实例】对数据网格的增删改查（上）

    前言 此案例是针对之前做的一个小例子的后台框架的修改,从以前的三层框架改为现在的MVC框架,也是做了一次MVC和EasyUI的结合,分为2篇文章来阐述. 界面如下: 点击"添加"按 ...

  10. hibernate报错:MappingException: Could not determine type for...解决办法

    有时候实体里的一些属性并不想映射到数据库(比方说子级菜单List), 如果不做处理的话会报字段映射错误找不到这列Column Not Found 例如:org.hibernate.MappingExc ...