Verwendung von Switch-Variablen in js-js-Tutorial-php.cn

Verwendung von Switch-Variablen in js

高洛峰

Freigeben： 2017-02-25 15:43:10

Original

2285 Leute haben es durchsucht

Rendering:

Verwendung von Switch-Variablen in js

Der Code lautet wie folgt:

<!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(&#39;prev&#39;);
 var oNext=document.getElementById(&#39;next&#39;);
 var oNote=document.getElementById(&#39;note&#39;);
 var oSpan=document.getElementById(&#39;span1&#39;);
 var oImg=document.getElementById(&#39;img1&#39;);
 var arrURL=[&#39;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&#39;,&#39;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&#39;,&#39;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&#39;,&#39;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&#39;,&#39;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&#39;];
 var arrNote=[&#39;多肉植物佛珠怎么养 翡翠珠的养殖方法&#39;,&#39;多肉植物紫弦月的养殖方法&#39;,&#39;多肉植物球松怎么养 球松的养殖方法&#39;,&#39;是一种小巧又可爱的 多肉植物&#39;,&#39;多肉植物蓝松怎么繁殖&#39;];
 var num=0;
 var oBtn=document.getElementsByTagName(&#39;input&#39;);
 var onOff=true;
 oBtn[0].onclick=function(){
 onOff=true;
 this.className=&#39;pink&#39;;
 this.nextSibling.className=&#39;&#39;;
 }
 oBtn[1].onclick=function(){
 onOff=false;
 this.className=&#39;pink&#39;;
 this.previousSibling.className=&#39;&#39;;
 }
 function fnTab(){
 oSpan.innerHTML=num+1+&#39;/&#39;+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(&#39;已经是第一张图片了，亲！&#39;);
  num=0;
  }
 }
 fnTab();
 }
 oNext.onclick=function(){
 num++;
 if(num==arrNote.length){
  if(onOff)
  {
  num=0;
  }else{
  alert(&#39;已经是第一张图片了，亲！&#39;);
  num=arrNote.length-1;
  }
 }
 fnTab();
 }
 }
 </script>
 <body>
 <section>
 <input type="button" value="循环播放" class="pink"/><input type="button" value="顺序播放" />
 </section>
 <p 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" / alt="Verwendung von Switch-Variablen in js" >
 </p>
 </body>
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen oder Arbeiten helfen kann. Ich hoffe auch, die chinesische PHP-Website zu unterstützen.

Weitere Artikel zur Verwendung von Switch-Variablen in js finden Sie auf der chinesischen PHP-Website!