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

如图

<!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. mysql登录出现1045错误

    这个问题是在window server 2012上安装mysql之后, 远程访问时出现的1045错误 我新建了一个相同的用户用于远程访问, 密码也相同, 但是还是访问不了 参照链接:https://b ...

  2. HDU 3208 Integer’s Power

    Integer’s Power Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Origina ...

  3. 华为USG6350防洪墙SNMP最简单功能配置

    https://www.cnblogs.com/vincent-liang/p/7785089.html

  4. hdu_2046_骨牌铺方格_201311251403

    骨牌铺方格 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  5. LDAP目录服务折腾之后的总结

    前言 公司管理员工信息以及组织架构的后台系统要和Active Directory目录服务系统打通,后台系统使用PHP开发, 折腾了二十多天,终于上线了,期间碰到过各种疑难问题,不过总算在GOOGLE大 ...

  6. 在centos7上安装DSPC

    感谢朋友支持本博客.欢迎共同探讨交流,因为能力和时间有限.错误之处在所难免,欢迎指正! 假设转载,请保留作者信息. 博客地址:http://blog.csdn.net/qq_21398167 原博文地 ...

  7. 全栈JavaScript之路（十）学习 DocumentFragment 类型 节点

    DocumentFragment 类型节点,代表一个文档片段,是一种轻量级的'文档' 对象.能够包括其他类型节点,并有能力訪问.操作当中的节点,可是在文档中没有文档标记,相当于是一个页面不可见的容器. ...

  8. [iOS]怎样在iOS开发中切换显示语言实现国际化

    1.在Project设置,加入中英两种语言: 2.新建Localizable.strings文件,作为多语言相应的词典,存储多种语言,点击右側Localization,勾选中英: watermark/ ...

  9. poj 1256 Anagram—next_permutation的神奇应用

    题意:给你一条字符串,让你输出字符串中字符的全排列,输出的顺序要按它给的奇葩的字典序. 题解:要输出全排列,暴力dfs可以过,但要注意题目的字典序以及相同字符的情况.如果用next_permutati ...

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

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