<!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <style type="text/css">

     body{text-align: center;}

     div{ margin: 100px auto; width:790px; position: relative;}

     .nav{position: absolute;right: 19px;left: auto;bottom: 8px; top: auto;}

     .nav a{background-color: red; padding: 2px 5px; border-radius:50%; text-decoration:none;}

 </style>

 </head>

 <body>

 <div>

 <a></a>

     <img id="1" width="790px" height="340px" alt="" src="59a7a48aN7a42d3fe.jpg" style="display:block">

     <img id="2" width="790px" height="340px"  alt="" src="59cc929fNaebef801.jpg"style="display:none">

     <img id="3" width="790px" height="340px" alt="" src="59ccc986Nbf17e33e.jpg" style="display:none">

     <img id="4" width="790px" height="340px" alt="" src="59ccec77N64688a8d.jpg" style="display:none">

     <div class="nav">

         <a href="#" onmouseover="show(1)">1</a>

         <a href="#" onmouseover="show(2)">2</a>

         <a href="#" onmouseover="show(3)">3</a>

         <a href="#" onmouseover="show(4)">4</a>

     </div>

 </div>

 </body>

 <script type="text/javascript">

     var num=1;

     function show(n){

         if (!isNaN(Number(n))) {

             window.clearTimeout(time);

             num=n;

         }

         var images=document.getElementsByTagName("img");

         for(var i=0;i<images.length;i++){

             if(images[i].id==num){

                 images[i].style.display="block";

             }else{

                 images[i].style.display="none";

             }

         }

         if(num==4){

             num=1;

         }else{

             num++;

         }    

      time=window.setTimeout("show()",2000);

     }

 show();

 </script>

 </html>

实现Banner广告图片轮换的更多相关文章

  1. Android实现Banner界面广告图片循环轮播（包括实现手动滑动循环）

    前言:经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环.本以为单纯的ViewPager就可以实现这些功能.但是蛋疼的事情来了,ViewPager并不支持循环翻页.所以 ...

  2. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  3. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  4. 一张广告图片引起的思维DFS

    1.概述 今天老同事发了一张图片, 结果后面有几个家伙回了“中毒了...”“这是挖墙脚的节奏么”(对了,这个老同事也离职了). 本来也想说上几句的,发现激情难在. 不过,最近了解到DIP.DM.ML. ...

  5. JavaScript之图片轮换

    <!doctype html> <title>javascript图片轮换</title> <meta charset="utf-8"/& ...

  6. PHP随机生成广告图片的实例 代码

    PHP随机生成广告图片: <?php /*  +------------------------------------------------------------------+  | Mi ...

  7. 一个Banner广告收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 转载ECTouch1.0 修改后台广告管理中广告列表显示广告图片

    http://www.ectouch.cn/topics/94.html 效果 操作: 1. 修改后台控制器文件 调用出相关字段信息. mobile\include\apps\admin\contro ...

  9. Js_图片轮换

    本文介绍用javascript制作图片轮换效果,原理很简单,就是设置延时执行一个切换函数,函数里面是先设置下面的缩略图列表的白框样式,再设置上面大图的src属性,在IE中显示很正常,可是在FF中会有变 ...

随机推荐

  1. shell脚本编程数组

    数组: 变量:存储单个元素的内存空间 数组:存储多个元素的连续的内存空间,相当于多个变量的集合 数组名和索引 索引:编号从0开始,属于数值索引 注意:索引可支持使用自定义的格式,而不仅是数值格式,即为 ...

  2. springboot批量读取参数映射到实体类

    spring读取配置参数可以通过${name}的方式获取,如properties文件中存在如下配置 person.username=xi 则可通过${person.username}获取其对应的值xi ...

  3. 查一张表占多少空间Bytes

    SELECT SUM(BYTES)/1024/1024||'MB' 占用空间 FROM dba_segments WHERE segment_name = '表名' AND owner = '用户名' ...

  4. OpenCV中出现“Microsoft C++ 异常: cv::Exception，位于内存位置 0x0000005C8ECFFA80 处。”的异常

    对于OpenCV的安装 要感谢网友空晴拜小白提供的教程 链接如下: https://blog.csdn.net/sinat_36264666/article/details/73135823?ref= ...

  5. matlab遍历文件夹下所有图片和遍历所有子文件夹下图片

    做图像处理实验,经常需要遍历当前文件下所有图片.matlab当然很早就考虑了这个问题,库函数dir就是完成这个工作的.函数返回的是一个存放所有目录下文件信息的结构体,通过遍历结构体就可以达到访问所有文 ...

  6. SSD: Single Shot MultiBox Detector论文阅读摘要

    论文链接: https://arxiv.org/pdf/1512.02325.pdf 代码下载: https://github.com/weiliu89/caffe/tree/ssd Abstract ...

  7. 埃利斯（A.Ellis）ABCDE情绪管理理论

    埃利斯(A.Ellis)ABCDE情绪管理理论A :Activating Events(诱发事件)B :Beliefs(个体对诱发事件的评价.解释.看法)C :Consequences(个体情绪和行为 ...

  8. linux 执行shell脚本的时候，生成的log文件乱码

    脚本执行后,生成的log文件,cat打开没有问题,vim打开就是文字乱码. file1完全没有问题,其他人的file2追加到file中间的时候就出现了这个问题. 因为使用notepad在win7写的, ...

  9. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-7.授权登录获取微信用户个人信息实战

    笔记 7.授权登录获取微信用户个人信息实战         简介:讲解使用授权码code获取用户个人信息接口 关键点:看微信文档,字段尽量用拷贝 1.通过code获取access_token      ...

  10. Hibernate 的一些注解配置

    网上参考资料很多,但总是不符合自身习惯,遂记录下来. 一对多的关系 如class与student的关系 class中 @OneToMany(mappedBy = "class") ...