zoukankan      html  css  js  c++  java
  • 带控制按钮的简单幻灯片

     1 <html>
     2 <head>
     3 <script type="text/javascript">
     4 /******************************************带控制按钮的简单幻灯片*********************************************/
     5 var i=0;  //定义全局变量i timeout
     6 var timeout;
     7 function preLoadImages(){  //创建预加载函数数组,数组由3张图片
     8     Planet=new Array();
     9     Planet[0]=new Image();
    10     Planet[0]="images/2.jpg";
    11     Planet[1]=new Image();
    12     Planet[1]="images/3.jpg";
    13     Planet[2]=new Image();
    14     Planet[2]="images/4.jpg";    
    15 }
    16 function start(){  //定义开始函数
    17     if (i<Planet.length){
    18         document.images["images_name"].src=Planet[i];
    19         i++;  //当i的值小于数组的值,会循环显示新图片
    20     }
    21     else{
    22         i=0;  //当i的值达到数组的最大值3时,把数组的索引值重置为0
    23         document.images["images_name"].src=Planet[i];
    24     }
    25     timeout=setTimeout('start()',1000);  //每1秒切换一张图片
    26 }
    27 function stop(){
    28     clearTimeout(timeout);  //清楚Timeout 即停止图片切换
    29 }
    30 </script>
    31 </head>
    32 
    33 <body onload="preLoadImages();"> <!--页面加载是onLoad事件被触发,调用preLoadImages()函数先将图片预先加载-->
    34 <div align="center">
    35 <h2>带控制按钮的简单幻灯片展示</h2>
    36 <img name="images_name" src="images/1.jpg"/>
    37 <p><input type="button" value="开始" onClick="start();"/>&nbsp;&nbsp;<input type="button" value="停止" onClick="stop();"/></p>
    38 </div>
    39 </body>
    40 </html>
  • 相关阅读:
    hlgoj 1766 Cubing
    Reverse Linked List
    String to Integer
    Bitwise AND of Numbers Range
    Best Time to Buy and Sell Stock III
    First Missing Positive
    Permutation Sequence
    Next Permutation
    Gray Code
    Number of Islands
  • 原文地址:https://www.cnblogs.com/52css/p/2642512.html
Copyright © 2011-2022 走看看