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 ...
一周排行
  • 1 源码下载 直接放出源码地址,为了编译源码,需要下载安装OSGi.NET插件框架安装包:http://www.iopenworks.com/. 框架安装包:MuiTreeNavVsPackage.zip(使用方法见 ...
  • 选择题,下列各题A).B).C).D)四个选项中,只有一个选项是正确的. (1)下列叙述中正确的是 A)线性表是线性结构 B)栈与队列是非线性结构 C)线性链表是非线性结构 D)二叉树是线性结构 (2)下列数据结构中 ...
  • 易网科技讯 11月8日消息,据路透社报道,美总统大选结果出晓后,股市于周三迎来了新一轮的恐慌.受大盘暴跌的影响,苹果股票周三也大跌近4%,创下了五个月以来最低价格.截止收盘,苹果下跌3.83%,报558.00美元,总 ...
  • 前段日子开始学Oracle数据库,但是由于Oracle数据库的服务启动时间很长 所以机房的里面所有电脑的Oracle服务全部是被禁用的 所以每次上机使用的时候都要先进服务管理,然后把禁用更改为手动模式,再开启服务 再 ...
  • 假如我有一个类库 Lib,提供一个类 ClassA 对外服务,ClassA 中有若干只读属性 PropA, PropB 等等,外部调用者无法对 ClassA 中的 PropA 和 PropB 进行写操作,于是我可以这 ...
  • cocos2dx针对游戏设计的不同方面会有不同的优化方案,可以对声音,对内存,对图片格式,对色彩等等进行优化.有关这些方面的方法请大家查找其他的文章.我今天要说的是如何对精灵进行优化,程序中我们用到的最多的就是精灵, ...
  • Oracle与防火墙设置 要访问防火墙后的windows oracle数据库,仅仅通过简单的打开固定TCP端口的方式是不行的. 这个问题的根本原因是windows oracle数据库的BT设计(unix/linux无 ...
  • Fielding是HTTP1.1和URI标准的主要制定者 .他在2000年写了一篇博士论文,提出了REST的架构风格和设计思想.http://www.ics.uci.edu/~fielding/pubs/disser ...
  • 1.首先我们的目的是长期监听时间变化,其实应用程序退出. 通过了解我们知道注册ACTION_TIME_TICK广播接收器可以监听系统事件改变,但是 查看SDK发现ACTION_TIME_TICK广播事件只能动态注册: ...
  • TThread在Classes单元里的声明如下 type TThread = class private FHandle: THandle; FThreadID: THandle; FTerminated: Bool ...