<body>

    <div class="body"><img src="bopin/images/bigImg1.jpg" width="524" height="190" border="2" alt="廣告圖片" id="Rotator"></div>

    <div class="bg">

    <div class="number" id="fig_1" onclick="show(1);">1</div>

    <div class="number" id="fig_2" onclick="show(2);">2</div>

    <div class="number" id="fig_3" onclick="show(3);">3</div>

    <div class="number" id="fig_4" onclick="show(4);">4</div>

    </div>

 </body>

 <script type="text/javascript">

    var title=new Array();

    title[0]="1.店慶第一波 限時搶購 一日三瘋！";

    title[1]="2.十年店慶均價場 39/99/169專場！";

    title[2]="3.全場69折封頂 享噹噹的超值低價！"

    title[3]="4.店慶鉅獻 海量圖書69折封頂";

    var NowFrame=1; //最先顯示第一張圖片

    var MaxFrame=4; //一共五張圖片

    function show(d1){

       if(Number(d1)){

          clearTimeout(theTimer); //當觸動按鈕時，清除計時器

          NowFrame=d1; //設當前顯示圖片

       }

    for(var i=1;i<(MaxFrame+1);i++){

       if(i==NowFrame){

          document.getElementById("Rotator").src="bopin/images/bigImg"+i+".jpg"; //顯示當前圖片

          document.getElementById("fig_"+i).innerHTML=title[i-1]; //顯示當前圖片對應的標題

          document.getElementById("fig_"+i).className="numberOver"; //設置當前標題的CSS樣式

       }

       else{

          document.getElementById("fig_"+i).innerHTML=i;

          document.getElementById("fig_"+i).className="number";

       }

    }

    if(NowFrame==MaxFrame){//設置下一個顯示的圖片

       NowFrame=1;

    }

    else{

       NowFrame++;

    }

    }

    var theTimer=setInterval('show()',3000); //設置定時器，顯示下一張圖片

    window.onload=show; //頁面加載時運行函數show()

 </script>

图片切换小demo的更多相关文章

  1. Swift基础之实现一个镂空图片的小Demo

    前两天看了别人的文章,涉及到了镂空的展示,所以我在这里把实现的内容写成Swift语言的小Demo,供大家欣赏 首先,需要创建导航视图,然后创建两种展示方式的按钮 let vc = ViewContro ...

  2. 一个上传图片，预览图片的小demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JavaScript_DOM学习篇_图片切换小案例

    今天开始学习DOM操作,下面写一个小案例来巩固下知识点. DOM: document object model (文档对象模型) 根据id获取页面元素 : 如: var xx = document.g ...

  4. jquery 图片切换

    仿着写的一个jquery的图片切换小插件,代码如下: html: <!DOCTYPE html> <html lang="en"> <head> ...

  5. 写个关于使用cocostudio Armature实现动画自由切换的小demo

    这是一个关于使用cocostudio实现动画自由切换的小demo auto sprite =Sprite::create("background.png"); sprite-> ...

  6. 教你做炫酷的碎片式图片切换 (canvas)

    前言 老规矩,先上 DEMO 和 源码.图片区域是可以点击的,动画会从点击的位置开始发生. 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动.最近 ...

  7. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  8. 微信小程序小Demo

    微信小程序小Demo 调用API,轮播图,排行榜,底部BabTar的使用... board // board/board.js Page({ /** * 页面的初始数据 */ // 可以是网络路径图片 ...

  9. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

随机推荐

  1. 学习web前端学习路程

    学习路程: 1.HTML和CSS基础 2.JavaScript语言 3.jQuery 4.综合网站实践 5.优化及调试

  2. 轻量级DAO层实践初体验

    最近快被 Hibernate 给坑哭了,有了自己动手实现 ORM 映射 DAO 的冲动. 工作之余折腾了快一星期,总算是有点小成就. 现打算将过程记录下来,方便自己后续回顾填补遗漏. 1. 传统 JD ...

  3. [转]iostat命令详解

    iostat iostat用于输出CPU和磁盘I/O相关的统计信息.  命令格式: iostat [ -c | -d ] [ -k | -m ] [ -t ] [ -V ] [ -x ] [ devi ...

  4. Log4j 简单应用

    #输出日志的包路径log4j.logger.com=DEBUG,FILE log4j.rootLogger=WARN,stdout #控制台日志 log4j.appender.stdout=org.a ...

  5. 从基层容器类看万变不离其宗的JAVA继承体系

    以容器类为例子,可以观一叶而知秋,看看以前的前辈们是如何处理各种面向对象思想下的继承体系的.读的源代码越多,就越要总结这个继承关系否则读的多也忘得快. 首先摆上一张图片: 看到这张图很多人就慌了,难道 ...

  6. yii 核心类classes.php详解（持续更新中...）

    classes.php在yii运行的时候将被自动加载,位于yii2文件夹底下. <?php /** * Yii core class map. * * This file is automati ...

  7. 在canvas中使用html元素

    让div悬浮于canvas之上   使用z-index控制层及顺序 慕课网canvas demo <div id="canvas-wrapper"> <canva ...

  8. 海思h264解码库

    海思的dll,解码h264  解码后转出yuv12 dll自己百度下载  hi_h264dec.dll   hi_h264dec_w.dll   调用方法: if (H264Dec.Hi264DecA ...

  9. Ｃ＃+　AE　注意问题汇总（不断更新）

    1.AE的COM对象释放问题尤其是IFeatureCursor 建议用 ESRI.ArcGIS.ADF.ComReleaser.ReleaseCOMObject(pObj); 或者 int iRefs ...

  10. CentOS Linux解决Device eth0 does not seem to be present

    在VMware里克隆出来的Centos Linux.. ifconfig...没有看到eth0..然后重启网卡又报下面错误. 故障现象: 解决办法: 首先,打开/etc/udev/rules.d/70 ...