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年11月11日,刘庆峰和其 ...
  •   在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,[email protected] @[email protected],则把这些类注册为bea ...
  • 这是一篇翻译文章.原文出处:http://www.raywenderlich.com/95910/uiview-animation-swift-tutorial   动画( animation)是iOS用户界面中非常 ...
  • 1. 安装高通编modem的环境 安装cywin, 安装目录C:utils, 安装选项中不用的不要选 安装python, 安娤为C:pythons, 加入环境变量, 把cywin的两个python, 删掉,  安装a ...
  • 在使用Oracle数据泵来进行ArcSDE数据的逻辑迁移时,有时候会报如下错误: C:\>impdp map/map tables=buildings directory=exp_imp_dir dumpfil ...
  •   12月26日消息,新浪今天午间通过官方微博“微博小秘书”发表声明,否认476万微博账号被盗的传言,称只有极少数部分因使用和其他网站相同的账号密码致不安全.   上周末,多名网友反映自己新浪微博账号被盗,盗号者使用 ...
  • 这些文章是阅读<linux内核修炼之道>的笔记和一些自己补充的知识和感悟,写的不清楚的地方请查看<linux内核修炼之道>等资料.同时文章若有不妥的地方请大家指出,谢谢. 转载请注明出处:ht ...
  • 美国巴诺书店强化电子书阅读器"NOOK"的实体店业务 美国大型书籍零售企业巴诺书店(Barnes&Noble)日前宣布,将大幅扩大其电子书阅读器"NOOK"的店内展示场 ...
  • Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 889   Accepted: 428 以0--2^(n-1)-1为编号建立一棵树,共2^(n ...
  • 易网科技讯 12月7日下午消息,中国联通将从12月15日起陆续推出3G无线上网卡半年卡和年卡资费. 据悉,半年卡和年卡的最长有效期分别为180天和360天,套内流量和赠送短信可在有效期内自由使用.其中,3G无线上网卡 ...