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 相关文章推荐
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 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中变量及部分适用方法
2008/03/27 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
php自定文件保存session的方法
2014/12/10 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
党课学习思想汇报
2014/01/02 职场文书
大学班级计划书
2014/04/29 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
违纪学生保证书
2015/02/27 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python