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

如图

<!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. C++数组查重

    今天课上实验课,遇到一道题目,需要查找一个数组中出现次数最多的元素和次数,并且输出.第一次用struct模拟字典,十分麻烦而且复杂度是O(n*n).其实,运用转化的思想,可以先将其排序,然后再查找即可 ...

  2. 【Codeforces 1B】Spreadsheets

    [链接] 我是链接,点我呀:) [题意] A~Z分别对应了1~26 AA是27依次类推 让你完成双向的转换 [题解] 转换方法说实话特别恶心>_< int转string 得像数位DP一样一 ...

  3. Git学习总结（13）——使用git.oschina作为自己的源代码在线管理库

    工作有几年了,期间积累了很多的代码片段,一直想找个存放的地方,方便随时的取用.以前可能是放在自己电脑的硬盘中,但毕竟这样使用起来还是有很多不便. 下面通过码云来说明 一下设置过程.其实,码云和GitH ...

  4. linux的ulimit各种限制之深入分析

    一般可以通过ulimit命令或编辑/etc/security/limits.conf重新加载的方式使之生效 通过ulimit比较直接,但只在当前的session有效,limits.conf中可以根据用 ...

  5. ClassCastException：ColorDrawable cannot be cast to RoundRectDrawableWithShadow

    错误信息 java.lang.ClassCastException: android.graphics.drawable.ColorDrawable cannot be cast to android ...

  6. N天学习一个Linux命令之ln

    前言有时候同一个文件想创建多个别名,这个时候可以使用链接文件代替 用途对文件或者目录创建链接,默认创建的是硬链接 硬链接Linux底层文件系统由超级数据块,目录树对象,inode索引节点对象,文件对象 ...

  7. Hello, HTML5!

    一个典型的HTML5文档的基础结构如下: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf ...

  8. HDU 5431

    由于最长不超过30个字符(由K的范围确定),于是,枚举所有的字符串,二分中使用二分就可以确定第K小了. #include <iostream> #include <cstdio> ...

  9. 翻翻git之---溜的飞起的载入效果AVLoadingIndicatorView

    转载请注明出处:王亟亟的大牛之路 由于接近过春节.看各个群体的工作都不太旺盛(不是年会就是各种吹B或是放空). 之前的Material Design的内容差点儿讲的差点儿相同了(至少基本的几个控件都介 ...

  10. iOS开发网络篇之Web Service和XML数据解析

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主.捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...