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

如图

<!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 #666;

    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()', 3000);   //设置定时器，显示下一张图片

window.onload=show;    //页面加载时运行函数show()

 </script>

</html>

JavaScript图片轮播，举一反三的更多相关文章

  1. Javascript图片轮播

    原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...

  2. JavaScript图片轮播器

    先贴上html的代码 <div class="ImgDiv"> <div class="Imgs" id="imgScroll&qu ...

  3. JavaScript 图片轮播入门

    轮播要求:一个在页面居中的矩形框,图片依次从矩形框中经过 当图片完整占满矩形框时 停留一小段时间再向左边移动经过矩形框的图片自动跑到右边最后一个图的后面.核心原理:在一个for循环中利用offsetl ...

  4. 图片轮播jQuery

          <script type="text/javascript">         //图片轮播         var bannerIndex = 0; ba ...

  5. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  6. 原生Js_使用setInterval() 方法实现图片轮播功能

    用javascript图片轮播功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  7. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  8. JavaScript对象(document对象 图片轮播)

    图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  9. javaScript 手写图片轮播

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

随机推荐

  1. 第四节：numpy之数组排序

  2. windows桌面远程工具连接Ubuntu

    1.Ubuntu安装:sudo apt-get install xrdp    sudo apt-get install vnc4server sudo apt-get install xubuntu ...

  3. H5 坑

    document.addEventListener("touchmove",function(e){e.preventDefault();},false); 防止滑动时整屏页面移动 ...

  4. HDOJ 5417 Victor and Machine 水

    Victor and Machine Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Othe ...

  5. web压力測试-Web Bench

    1.web bench下载.地址:http://home.tiscali.cz/~cz210552/webbench.html 2.wen bench安装: [root@web111 tmp]#tar ...

  6. jQuery总结04

    1 JavaScript 中的 AJAX 的四个实现步骤分别是? 2 如何处理 XMLHttpRequest 对象的兼容问题? 3 jQuery 中的 AJAX 4 jQuery 选择器包括哪些? 5 ...

  7. android logo：内核、android开机动画【转】

    本文转载自: 关键词:Android 开机logo  开机动画 initlogo.rle   bootanimation  desc.txt 平台信息:内核:linux2.6/linux3.0系统:a ...

  8. maven工程读取resource下配置文件

    maven工程读取resource下配置文件 在maven工程中,我们会将配置文件放到,src/main/resources   下面,例如 我们需要确认resource 下的文件 编译之后存放的位置 ...

  9. hdu 1213(并查集模版题）

    How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  10. 【POJ 1964】 City Game

    [题目链接] http://poj.org/problem?id=1964 [算法] 记f[i]表示第i行最多向上延伸的行数 然后,对于每一行,我们用单调栈计算出这一行向上延伸的最大矩形面积,取最大值 ...