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 相关文章推荐
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php读取html并截取字符串的简单代码
2009/11/30 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python中使用SAX解析xml实例
2014/11/21 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
Python多继承原理与用法示例
2018/08/23 Python
python实现画图工具
2020/08/27 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
动物科学专业毕业生的自我评价
2013/11/29 职场文书
低碳生活倡议书
2014/04/14 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书