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

如图

<!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. gitblit 搭建本地git服务器

    本文主要描述gitblit搭建本地服务器

  2. Python OS & sys模块

    os模块(* * * *) os模块是与操作系统交互的一个接口 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname" ...

  3. BZOJ 4430 Guessing Camels赌骆驼

    [题意概述] 给出三个n的排列,求有多少个数对在三个排列中顺序相同 [题解] 考虑用补集转化的方法,答案为总对数-不满足的对数 一对数不满足条件,当且仅当这对数在两个排列中顺序相同,在另一个排列中的顺 ...

  4. CF410div2 B. Mike and strings

    /* CF410div2 B. Mike and strings http://codeforces.com/contest/798/problem/B 字符串 暴力 题意:给你n个串,每次操作可以将 ...

  5. hdu 4950

    #include<stdio.h> int main(){ __int64 h,a,b,k,j=0; while(scanf("%I64d%I64d%I64d%I64d" ...

  6. Postgres 数据库字符集更改 ERROR: new encoding (UTF8) is incompatible

    https://blog.csdn.net/hkyw000/article/details/52817422 http://www.cnblogs.com/taosim/articles/438329 ...

  7. Maven 的dependency 的 classifier的作用

    直接看一个例子,maven中要引入json包,于是使用了 <dependency> <groupId>net.sf.json-lib</groupId> <a ...

  8. MongoDB学习笔记一：MongoDB的下载和安装

    MongoDB学习笔记一:MongoDB的下载和安装 趁着这几天比較空暇,准备学习一下MongoDB数据库.今天就简单的学习了一些MongoDB的下载和安装.并创建了存储MongoDB的数据仓库. 将 ...

  9. DirectX11 学习笔记8 - 最简单的光照

    在上一个列子的基础上加了一个地面.这个地面是光照效果生成的. 看图: 先说明: 光照 须要重写一个 lightshader  就是光照的渲染器 // Define the input layout D ...

  10. Oracle学习(一)：基本操作和基本查询语句

    文中以"--"开头的语句为凝视,即为绿色部分 1.知识点:能够对比以下的录屏进行阅读 SQL> --录屏工具spool,開始录制,并指定保存路径为c:\基本查询.txt SQ ...