JavaScript图片轮播,举一反三

图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现。

如图

JavaScript图片轮播,举一反三

JavaScript图片轮播,举一反三

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>图片乱拨</title>
  <style type="text/css">
  
.body{
    width:524px;
    border:solid 1px #;
    margin-left:auto;
    margin-right:auto;
    }
  .bg{
        background-color:#E0E0E0;
        height:20px;
        border-top:solid 1px #B4B4B4;
        }
    .number{
        font-size: 14px;
        font-weight: bold;
        color: #FFF;
        background-color: #9E2E07;
        display: block;
        border: 1px solid #FFF;
        width:18px;
        height:18px;
        text-align: center;
        margin-left:10px;
        cursor:pointer;
        float:left;
        }
    .numberOver{
        color:#8C2806;
        font-size:14px;
        width:280px;
        background-color:#FFF;
        text-align:center;
        float:left;
        display: block;
        margin-left:10px;
        }
.main{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    }
    .left_indent{
        padding-left:20px;
        }
    .red{
        color:#F00;
        }

  
  
  </style>
 </head>
 <body>
 <div class="body"><img src="ad-01.jpg" width="524" height="190" border="0" alt="广告图片" id="Rotator">
 <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>
 </div>
 </body>
 <script type="text/javascript">
 // JavaScript Document
//定义全局变量
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 ="ad-0"+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()', 3);   //设置定时器,显示下一张图片
window.onload=show;    //页面加载时运行函数show()
 
 
 
 </script>
</html>

 

更多相关文章
  • window.location.href='http://www.51cto.com/edm/developedm/edm149-150630.html ';
  • 近期ESET专家发现一种新型恶意软件Mumblehard,该恶意软件至少秘密存在了五年,感染了数千的Linux和FreeBSD服务器,并利用这些服务器投送垃圾邮件. 恶意软件Mumblehard攻击详情 ESET安全专家通过监视他们的C&C服务器发现曾有8867个不同IP地址连接了该服务器. ...
  • bs2.dll是一个病毒危险文件,这里简单介绍下手工删除方法,需要的朋友可以参考下 Bs3.dll is related to the BookedSpace adware, used to displaypop-up advertisement. These instructions is rel ...
  • 一. 基础命令之ls 1. ls解释; 列出文件及目录 2. 常用参数; ①. -l: 详细信息 [[email protected] ~]# ls -l total 20 -rw-------. 1 root root 1109 Jan 20 18:08 anaconda-ks.cfg ------/省略 ...
  • 之 APP入口 [图片 Android vs iOS] 提纲 对比分析iOS,Android的入口, iOS,Android的界面单元 为什么要有那样的生命周期 继承和抽象类怎么写,例如工厂模式 对象的强弱,iOS的特色 程序入口 (Entry Point) #首先来看iOS应用的入口: int m ...
  •   如果你认为苹果Mac比Windows系统更安全,请三思.研究人员已经证明了:这不是真的. Mac不再“百毒不侵” 两名研究人员开发出第一个可感染Mac的固件蠕虫病毒,并且可以在无需联网的情况下在MacBook间进行自动传播. 该病毒被称为“Thunderstrike 2”,是年初“Thunder ...
一周排行
  • Cacti和Nagios是现在使用比较多的网络监控软件了,对于这两款监控软件的区别,应该说是侧重点的不同. Cacti比较着重于直观数据的监控,易于生成图形,用来监控网络流量.cpu使用率.硬盘使用率等可以说很在合适 ...
  •        OLE DB(OLEDB)是微软的战略性的通向不同的数据源的低级应用程序接口.OLE DB不仅包括微软资助的标准数据接口开放数据库连通性(ODBC)的结构化查询语言(SQL)能力,还具有面向其他非SQL ...
  • 很简单但很虐心的一道题: 我感觉自己的算法没错,但是老是过不了:= = 但是还是把代码贴出来: 我的方法,用并查集的方式做一课树,然后对树进行遍历: 有多少棵树就有多少个点剩余: #include<cstdio ...
  • 这回又买了一块树莓派,这次用的是B+.树莓派做BT下载器的特性就是省电啊. 原来想买一个路由器刷openwrt,后来觉得路由器可能性能有限,而且稍有不慎会刷坏uboot,所以暂且不考虑了. 搭建过程网上都有,但是很零 ...
  • 在最近的IT领袖峰会上,马化腾.李彦宏表现中规中矩,硬件大佬杨元庆全面开炮,对互联网安全软件"捆绑用户"的一顿臭骂,李彦宏.马化腾当场予以否认,大家又开始玩起"猜猜是谁"的游戏 ...
  • TAG: java 时间格式化 分钟加减 时间加减 由于最近项目要用到某些功能的自动化,需要恶补一系列的知识,所以写下相关细节,不为别的,因为最近意识到,自己很残疾,一个月前写的代码今天一看都不知道写的是什么,还问别 ...
  • windows8系统怎么在设备管理器中禁用某一设备的需求是广大网友们的心声哈,下面的教程将带领你实现这个技巧,感兴趣个各位可不要错过了哈 Win8在设备管理器中禁用某一设备的方法如下: 1.在系统下同时按住键盘上“W ...
  • WITH T AS ( SELECT CAST(Tree_Id AS VARCHAR(20)) AS CODE,*,CAST(City_Id AS VARBINARY(MAX)) AS px FROM Class_C ...
  • MVC 是一种软件设计模式,即  模型 - 视图 - 控制器.   模型- 视图 - 控制器模式是由以下三部分组成: 模型/Model - 一个负责维护数据模式的最低水平. 视图/View - 负责显示所有或数据到用 ...
  • Wow!什么是Wow64 今天有个同事,被SysWow64搞晕了.这里简单介绍一下. 64位的Windows并不是简单地把所有东西都编译成64位就万事大吉的.关于64位的CPU应该做成什么样子,Intel和AMD曾有 ...