js中开关变量使用实例


Posted in Javascript onFebruary 24, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
vue里的data要用return返回的原因浅析
May 28 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 #Javascript
js实现导航吸顶效果
Feb 24 #Javascript
canvas绘制多边形
Feb 24 #Javascript
angularjs实现多张图片上传并预览功能
Feb 24 #Javascript
Angularjs分页查询的实现
Feb 24 #Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 #Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 #Javascript
You might like
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
js select option对象小结
2013/12/20 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
js点击选择文本的方法
2015/02/09 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
使用Python对Excel进行读写操作
2017/03/30 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
Python3最长回文子串算法示例
2019/03/04 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
给领导的检讨书
2014/02/16 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
如何做好工作总结!
2019/04/10 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers