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

如图

<!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. MongoDB - 认识MongoDB及数据类型

    目录 MongoDB - 认识MongoDB及数据类型 启动 MogoDB的数据 MogoDB的数据类型 1.Object ID : Documents自生成的_id 2.string : 字符串,必 ...

  2. scrapy框架的日志等级和请求传参, 优化效率

    目录 scrapy框架的日志等级和请求传参, 优化效率 Scrapy的日志等级 请求传参 如何提高scripy的爬取效率 scrapy框架的日志等级和请求传参, 优化效率 Scrapy的日志等级 在使 ...

  3. hdu 5178 pairs

    pairs 问题描述 John 在X轴上拥有nn个点,他们的坐标分别为$(x[i],0),(i=0,1,2,…,n-1)$. 他想知道有多少对< a,b ><a,b>满足|x[ ...

  4. 强悍的 ubuntu —— 命令行访问网页

    所谓以命令行的方式访问网页,即是在终端下以文本的形式访问网站,这里推荐一个工具:w3m, $ sudo apt-get install w3m $ w3m www.baidu.com

  5. BZOJ 4327 [JSOI2012]玄武密码 (AC自动机)

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=4327 题解: 做法挺显然,建出AC自动机之后在上面跑,标记所有走过的点,然后再进行递推 ...

  6. 【codeforces 779E】Bitwise Formula

    [题目链接]:http://codeforces.com/contest/779/problem/E [题意] 给你n个长度为m的二进制数 (有一些是通过位运算操作两个数的形式给出); 然后有一个未知 ...

  7. 【LeetCode Weekly Contest 26 Q1】Longest Uncommon Subsequence I

    [题目链接]:https://leetcode.com/contest/leetcode-weekly-contest-26/problems/longest-uncommon-subsequence ...

  8. （45）. Spring Boot MyBatis连接Mysql数据库【从零开始学Spring Boot】

    大家在开发的时候,会喜欢jdbcTemplate操作数据库,有喜欢JPA操作数据库的,有喜欢MyBatis操作数据库的,对于这些我个人觉得哪个使用顺手就使用哪个就好了,并没有一定要使用哪个,个人在实际 ...

  9. Master Nginx(8) - Troubleshooting Techniques

    Analyzing log files Error log file formats Error log file entry examples Configuring advanced loggin ...

  10. 开源 免费 java CMS - FreeCMS1.9 移动APP生成栏目列表数据

    项目地址:http://www.freeteam.cn/ 生成栏目列表数据 提取当前管理网站下同意移动APP訪问的栏目列表,生成json数据到/site/网站文件夹/mobile/channels.h ...