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>
<p 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" />
</p>
</body>
</html>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！
更多js中开关变量使用相关文章请关注PHP中文网！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
Python 语法的思维导图：深入理解代码结构
Feb 21, 2024 am 09:00 AM
python凭借其简单易读的语法，广泛应用于广泛的领域中。掌握Python语法的基础结构至关重要，既可以提高编程效率，又能深入理解代码的运作方式。为此，本文提供了一个全面的思维导图，详细阐述了Python语法的各个方面。变量和数据类型变量是Python中用于存储数据的容器。思维导图展示了常见的Python数据类型，包括整数、浮点数、字符串、布尔值和列表。每个数据类型都有其自身的特性和操作方法。运算符运算符用于对数据类型执行各种操作。思维导图涵盖了Python中的不同运算符类型，例如算术运算符、比
如何使用Ajax从PHP方法中获取变量？
Mar 09, 2024 pm 05:36 PM
使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：
js和vue的关系
Mar 11, 2024 pm 05:21 PM
js和vue的关系：1、JS作为Web开发基石；2、Vue.js作为前端框架的崛起；3、JS与Vue的互补关系；4、JS与Vue的实践应用。
什么是Java中的实例变量
Feb 19, 2024 pm 07:55 PM
Java中的实例变量是指定义在类中，而不是方法或构造函数中的变量。实例变量也称为成员变量，每个类的实例都有自己的一份实例变量副本。实例变量在创建对象的过程中被初始化，以及在对象的生命周期中保存并保持其状态。实例变量的定义通常放在类的顶部，可以用任何访问修饰符来声明，可以是public、private、protected或默认访问修饰符。这取决于我们希望这个变
