js中开关变量使用实例
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
#wrap{
width: 400px;
height: 500px;
border: 1px solid #ccc;
margin: 20px auto;
position: relative;
overflow: hidden;
background: #f1f1f1;
}
#wrap a{
width: 40px;
height: 50px;
background:rgba(0,0,0,.4);
/*border: 1px solid #fff;*/
position: absolute;
top: 50%;
margin-top: -25px;
text-align: center;
text-decoration: none;
line-height: 50px;
color: white;
font-size: 30px;
}
#wrap a:hover{
background:rgba(0,0,0,.9);
}
#prev{
left: 10px;
}
#next{
right: 10px;
}
#note,#span1{
position: absolute;
left: 0;
width: 400px;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
background: rgba(0,0,0,.6);
}
#note{
bottom: 0;
}
#span1{
top: 0;
}
#img1{
width: 400px;
height: 500px;
}
section{
width: 400px;
height: 50px;
margin: 30px auto 0;
line-height: 50px;
text-align: center;
}
section input{
padding: 5px 15px;
margin-right: 10px;
}
.pink{
background: pink;
color: white;
}
</style>
</head>
<script>
window.onload=function(){
var oPrev=document.getElementById('prev');
var oNext=document.getElementById('next');
var oNote=document.getElementById('note');
var oSpan=document.getElementById('span1');
var oImg=document.getElementById('img1');
var arrURL=['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488463139&di=af377bee44237b092b20f1f7c86f2eb6&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.wed114.cn%2Fjiehun%2Fuploads%2Fallimg%2F160304%2F52_160304170213_3.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488463080&di=a0ba47cd212e8f5755a2f42738511a2e&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.6a8a.com%2Fuploadfile%2F2017%2F0809%2F2016071617592321137.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488463040&di=f9290db609a0994bdbd7221e644904ba&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.wed114.cn%2Fjiehun%2Fuploads%2Fallimg%2F160405%2F52_160405165047_3.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488462814&di=e1dacd05467c01a13d9eb4d800853f20&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.wed114.cn%2Fjiehun%2Fuploads%2Fallimg%2F160304%2F52_160304160734_5.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1487868087852&di=3011f4a2b23b63559c32f8f154ad0a3a&imgtype=0&src=http%3A%2F%2Fwww.wed114.cn%2Fjiehun%2Fuploads%2Fallimg%2F160411%2F52_160411172520_1.jpg'];
var arrNote=['多肉植物佛珠怎么养 翡翠珠的养殖方法','多肉植物紫弦月的养殖方法','多肉植物球松怎么养 球松的养殖方法','是一种小巧又可爱的 多肉植物','多肉植物蓝松怎么繁殖'];
var num=0;
var oBtn=document.getElementsByTagName('input');
var onOff=true;
oBtn[0].onclick=function(){
onOff=true;
this.className='pink';
this.nextSibling.className='';
}
oBtn[1].onclick=function(){
onOff=false;
this.className='pink';
this.previousSibling.className='';
}
function fnTab(){
oSpan.innerHTML=num+1+'/'+arrURL.length;
oImg.src=arrURL[num];
oNote.innerHTML=arrNote[num];
}
fnTab();
oPrev.onclick=function(){
num--;
if(num==-1){
if(onOff){
num=arrNote.length-1;
}else{
alert('已经是第一张图片了，亲！');
num=0;
}
}
fnTab();
}
oNext.onclick=function(){
num++;
if(num==arrNote.length){
if(onOff)
{
num=0;
}else{
alert('已经是第一张图片了，亲！');
num=arrNote.length-1;
}
}
fnTab();
}
}
</script>
<body>
<section>
<input type="button" value="循环播放" class="pink"/><input type="button" value="顺序播放" />
</section>
<div id="wrap">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="prev"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next">></a>
<p id="note">图片文字加载中......</p>
<span id="span1">数量正在计算中......</span>
<img id="img1" />
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
AngularJS实现根据变量改变动态加载模板的方法
本文实例讲述了AngularJS实现根据变量改变动态加载模板的方法.分享给大家供大家参考,具体如下: directive: return { restrict: 'E', replace: true, templateUrl: 'app/view/order.html', link: function (scope, element, attrs) { scope.Type = attrs.Type; } }; 模板: <div ng-switch on="item.Type"&
-
windows 下安装nodejs 环境变量设置
要设置两个东西,一个是PATH上增加node.exe的目录C:\Program Files\nodejs,一个是增加环境变量NODE_PATH,值为C:\Program Files\nodejs\node_modules 一.下载 去nodejs下载node.msi安装文件包,里面包含了node.js和npm: 双击node.msi就行了,选择安装路径和npm: 二.设置环境变量 [新版本都不需要设计环境变量了,软件会自动写入环境变量] 计算机(或者我的电脑)右击属性->高级系统设置->环境
-
js变量以及其作用域详解
一.变量的类型 Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: 复制代码 代码如下: i=100;//Number类型 i="variable";//String类型 i={x:4};//Object类型 i=[1,2,3];//Array类型 JS的这种特性虽然让我们的编码更加灵活,但也带来了一个弊端,不利于Debug,编译器的弱检测让我们维护冗长的
-
JS中的this变量的使用介绍
JavaScript中this的使用 在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂.而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象. 示例一. 复制代码 代码如下: var obj = {};
-
JS判断变量是否为空判断是否null
/** * 判断是否null * @param data */ function isNull(data){ return (data == "" || data == undefined || data == null) ? "暂无" : data; }
-
js判断变量是否未定义的代码
例如: if(!myVar01)alert("发生错误"); // 该代码直接发生异常,因为变量myVar01没有申明 if("undefined" == typeof myVar01)alert("发生错误"); // 这样写才不至于发生异常 而: var myVar01; if(undefined == myVar01)alert("发生错误"); // 该代码会正确运行 if("undefined"
-
JavaScript交换两个变量值的七种解决方案
前言 这篇文章总结了七种办法来交换a和b的变量值 var a = 123; var b = 456; 交换变量值方案一 最最最简单的办法就是使用一个临时变量了,不过使用临时变量的方法实在是太low了 var t; t = a; a = b; b = t; 首先把a的值存储到临时变量中,然后b赋值给a,最后拿出临时变量中的a值赋给b,这个办法是最基本的了 交换变量值方案二 下面的方案都不会有临时变量,我总结了一下,其实不使用临时变量的思路都是让其中一个变量变成一个a和b都有关系的值,这样可以先改变
-
js判断变量是否空值的代码
复制代码 代码如下: function empty(v){ switch (typeof v){ case 'undefined' : return true; case 'string' : if(trim(v).length == 0) return true; break; case 'boolean' : if(!v) return true; break; case 'number' : if(0 === v) return true; break; case 'object' : i
-
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
在项目开发过程中,也许你会遇这样的情况. 在某一Js文件中需要完成某一功能,但这一功能的大部分代码在另外一个Js文件中已经完成了,自己只需要调用这个方法再加上几句代码就可以实现所需的功能. 我们知道,在html中,利用<script language="javascript" type="text/javascript" src="./script.js"></script>引入的两个js是不可以相互调用的.那么该如何解决
-
基于JavaScript 声明全局变量的三种方式详解
JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量.该方式即为显式声明详细如下: <script> var test = 5;//全局变量 function a(){ var a = 3;//局部变量 alert(a); } function b(){ alert(test); } //a();//调用a方法,那么方法里面的内容才会执行 //b(