js 上下切换图片
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img class="icon" src="img/icon_01.png">
<p></p>
<button class="btn1">上一张</button>
<button class="btn2">下一张</button> <script>
// 拿到所有的标签
var img = document.getElementsByClassName('icon')[];
var btn1 = document.getElementsByClassName('btn1')[];
var btn2 = document.getElementsByClassName('btn2')[]; // 业务处理
var maxNumber = ;
var minNumber = ;
/// // 当前的值
var currentValue = minNumber; // 点上一张
btn1.onclick = function(){
if(currentValue == minNumber){
currentValue = maxNumber;
}else{
currentValue = currentValue - ;
}
img.src = 'img/icon_0'+currentValue +'.png';
}
// 点下一张
btn2.onclick = function(){
if(currentValue == maxNumber ){
currentValue = minNumber;
}else{
currentValue = currentValue + ;
}
console.log(currentValue);
img.src = 'img/icon_0'+currentValue +'.png';
} </script> </body></html>
js 上下切换图片的更多相关文章
- js多种切换图片
分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...
- js自动切换图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 循环切换图片
function changeLot(){ var minIndex = 1; var maxIndex = 100; var curIndex = 10; var src = $("ul ...
- js动态切换图片
<script language =javascript > $(function () { initAds(); }); function initAds() { var curInde ...
- js 数组切换图片
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- [js开源组件开发]js轮播图片支持手机滑动切换
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...
- JS解决通过按钮切换图片的问题
我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...
随机推荐
- Javascript调用 ActiveXObject导出excel文档。
function makeDataBook(){ var xls = new ActiveXObject ("Excel.Application"); xls.visible = ...
- 在 .NET 4 中使用托管可扩展性框架构建可组合的应用程序
https://msdn.microsoft.com/zh-cn/library/ff576068.aspx http://blogs.msdn.com/b/nblumhardt/archive/20 ...
- 【C#】HTTP请求GET，POST（远程证书失效）
HTTP定义了与服务器交互的不同方法,基本方法有GET,POST,PUT,DELETE,分别对于查,该,增,删.一般情况下我们只用到GET和POST,其他两种都也可以用GET和POST来实现,很多浏览 ...
- 一篇非常适合git入门的文章
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579 ...
- 1.1 sikuli 安装
JRE7不支持sikuli,必须下载JRE6 更新号必须大于35 sikuli下载: http://www.cr173.com/soft/52775.html 或参照 http://www.cnb ...
- python2.x 使用protobuf
1.在windows下配置protobuf 1.1 下载对应的包,包含两个:protoc.exe和源码文件(protoc也可以自己生成) 下载地址1 --- google code最近在迁移,也许以后 ...
- js中子页面父页面方法和变量相互调用
(1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名window.parent相当于定位到父页面 之后的操作和在父页面中写代码一样写 window.parent.aa ...
- VS2010+PCL+openni配置
PCL中文论坛:http://www.pclcn.org/bbs/forum.php 1.安装 pcl 的完全安装包可以到: http://pointclouds.org/downloads/wind ...
- php 四种基础算法 ---- 快速排序法
4.快速排序法 代码: function quick_sort($arr) { //先判断是否需要继续进行 $length = count($arr); if($length < ...
- AI 人工智能 探索 （七）
我简单画了一幅图,来讲下 ai 中的设计模式.图形中的这些人物,我想大家都能看的明白. 当 盗贼出现,人们发现了他们,就 呼叫 主类,然后主类再 通知 下面对应的管理局,然后管理局再 分配人手过去 ...