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 相关文章推荐
JavaScript 创建运动框架的实现代码
May 08 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
BootStrap中的表单大全
Sep 07 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python实现复制大量文件功能
2019/08/31 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
魅力教师事迹材料
2014/01/10 职场文书
青年教师培训方案
2014/02/06 职场文书
争先创优活动总结
2014/08/27 职场文书
公民授权委托书
2014/10/15 职场文书
小学中等生评语
2014/12/29 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers