JS图片轮换
<!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图片轮换的更多相关文章
- js图片轮换播放器
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- 使用纯生js实现图片轮换
效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- JS图片自己主动轮换效果实现
今天不在状态,五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自己主动轮换效果,先看图片 以下是详细的代码,还是比較简单的. <!DOCTYPE ht ...
- Jquery实现图片轮换效果
最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...
- JS图片Switchable切换大集合
JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...
- 仿FLASH的图片轮换效果
css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...
- jquery 图片轮换
jquery 图片轮换 1.下载jquery.superslide.2.1.1.js (百度搜索) 2.下载Jquery-1.4.1.js(百度搜索下载) 准备工作好了,下面开始实现 3.html & ...
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- jQuery仿迅雷图片轮换效果
jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
随机推荐
- java面向对象入门(1)-入门介绍
在本 Java OOPs 概念教程中,我们将学习四种主要的面向对象原则 -- 抽象.封装.继承和多态性.它们也被称为面向对象编程范式的四大支柱. _抽象_是在不考虑无关细节的情况下公开实体基本细节的过 ...
- 关于HashMap中的扰动函数的疑问
最近再看jdk8的hashmap源码,当看到这一步的时候有点疑问,去网上搜了一下,看到的所有文章基本上都是一篇抄一篇的(反正目前各大社区就是这么个状况),那个意思就是让高16位也参与运算,增加结果的随 ...
- java的jdbc连接数据库，读取表中数据
连接数据库操作步骤如下 架包 jar 建表 源码解析 1:架包 jar根据自己本版本选择正确jar包,本例采用maven 管理局,在pom.xml 中添加如下代码,自动下载架包 <depende ...
- Flutter初探_环境配置以及创建项目
还没学会这个怎么排版,写了一版 太丑 没发看,' 先换到我熟悉的网站,后面搞定了排版再更新过来 https://www.jianshu.com/p/6fc913861461
- vue ----element-ui 文件上传upload 组件 实现 及其后台
1.前台 action 不用改 :https://jsonplaceholder.typicode.com/posts/ getFile: 获取文件 data(){ return { file: {} ...
- HashMap (JDK1.8) 分析
一.HashMap(JDK1.8) 1.基本知识.数据结构 (1)时间复杂度:用来衡量算法的运行时间. 参考:https://blog.csdn.net/qq_41523096/article/det ...
- ZedGraph5.1.5源码分析去掉鼠标悬浮内容闪烁问题(附源码下载)
场景 在使用ZedGraph绘制曲线图时,将鼠标悬浮时内容闪烁,且频率很高. 找到其源码,发现不论鼠标移动的范围大小,甚至乎不论鼠标是否移动,都要刷新一次Tooltip. 注: 博客主页:https: ...
- jQuery笔记（三）jQuery中的事件
; padding:0;} body { font-size:13px; line-height:130%; padding:60px;} #panel { width:300px; border:1 ...
- 使用faker 生成测试数据
测试数据生成 faker基础使用 from faker import Faker f=Faker(locale='zh_CN') print(f.name()) address 地址 person 人 ...
- 使用这7个隐藏技巧让您的Mac更易于阅读和使用！
macOS Mojave(10.15)可以说是苹果公司功能最强大,功能最强大的现代Mac软件更新版.它带来了一系列新功能,安全和隐私控制,稳定性增强以及Dark Mode主题! 它也代表了最易于使用的 ...