脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 变量

js中开关变量使用实例

 更新时间：2017年02月24日 14:31:07   作者：marie0119  
本文主要分享了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">&lt;</a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" id="next">&gt;</a>
 <p id="note">图片文字加载中......</p>
 <span id="span1">数量正在计算中......</span>
 <img id="img1" />
 </div>
 </body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 实例讲解javascript实现异步图片上传方法

    实例讲解javascript实现异步图片上传方法

    给大家详细讲解一下如何通过javascript写出异步图片上传，并且把实例代码给大家分享了下，有兴趣的读者们测试一下吧。
    2017-12-12
  • 值得分享的JavaScript实现图片轮播组件

    值得分享的JavaScript实现图片轮播组件

    这篇文章主要为大家详细介绍了JavaScript实现图片轮播组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript undefined及null区别实例解析

    JavaScript undefined及null区别实例解析

    这篇文章主要介绍了JavaScript undefined及null区别实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS实现适合于后台使用的动画折叠菜单效果

    JS实现适合于后台使用的动画折叠菜单效果

    这篇文章主要介绍了JS实现适合于后台使用的动画折叠菜单效果,实例展示了两种折叠菜单显示效果,涉及JavaScript响应鼠标事件动态遍历及改变页面元素样式的实现技巧,需要的朋友可以参考下
    2015-09-09
  • Sea.JS知识总结

    Sea.JS知识总结

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架。本文给大家分享sea.js知识总结，感兴趣的朋友一起学习吧
    2016-05-05
  • JavaScript 中的单例内置对象Global 与 Math

    JavaScript 中的单例内置对象Global 与 Math

    这篇文章主要介绍了JavaScript 中的单例内置对象Global与Math，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-07-07
  • js实现select跳转功能代码

    js实现select跳转功能代码

    实现select跳转的方法有很多，本例为大家介绍的是js实现的，通过location.href获取跳转地址，需要的朋友可以看看
    2014-10-10
  • js实现鼠标悬停图片上时滚动文字说明的方法

    js实现鼠标悬停图片上时滚动文字说明的方法

    这篇文章主要介绍了js实现鼠标悬停图片上时滚动文字说明的方法,涉及js操作鼠标事件的使用技巧,需要的朋友可以参考下
    2015-02-02
  • js实现的简单图片浮动效果完整实例

    js实现的简单图片浮动效果完整实例

    这篇文章主要介绍了js实现的简单图片浮动效果,以完整实例形式分析了javascript实现图片定时漂浮移动功能的方法,涉及javascript定时函数与数值动态运算相关技巧,需要的朋友可以参考下
    2016-05-05
  • uniapp微信小程序无法获取Vue.prototype值的解决方法

    uniapp微信小程序无法获取Vue.prototype值的解决方法

    在uniapp开发过程中,各端的一些高度会有区别,为了方便就要统一放到全局变量中,下面这篇文章主要给大家介绍了关于uniapp微信小程序无法获取Vue.prototype值的解决方法,需要的朋友可以参考下
    2022-10-10

最新评论