效果如图

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>图片滚动</title>
  6. </head>
  7. <body>
  8. <style type="text/css">
  9.  <!--
  10.  #demo {
  11.  background: #FFF;
  12.  overflow:hidden;
  13.  border: 1px dashed #CCC;
  14.  width:500px;
  15.  }
  16.  #demo img {
  17.  border:3px solid #F2F2F2;
  18.  }
  19.  #indemo {
  20.  float:left;
  21.  width:800%;
  22.  }
  23.  #demo1 {
  24.  float:left;
  25.  }
  26.  #demo2 {
  27.  float:left;
  28.  }
  29.  -->
  30. </style>
  31.     <div id="demo">
  32.         <div id="indemo">
  33.             <div id="demo1">
  34.                 <a href="#"><img src="http://www.trip-j.net/images/hotelimg/6614/200811201335594038.jpg" border="0" /></a>
  35.                 <a href="#"><img src="http://www.trip-j.net/images/hotelimg/2457/20081061952145229.jpg" border="0" /></a>
  36.                 <a href="#"><img src="http://www.trip-j.net/images/hotelimg/2574/20081091921231611.jpg" border="0" /></a>
  37.                 <a href="#"><img src="http://www.trip-j.net/images/hotelimg/2395/20081062005358398.jpg" border="0" /></a>
  38.                 <a href="#"><img src="http://www.trip-j.net/images/hotelimg/3564/20081191214549634.jpg" border="0" /></a>
  39.                 <a href="#"><img src="http://www.trip-j.net/images/hotelimg/3129/20081091715454669.jpg" border="0" /></a>
  40.             </div>
  41.         <div id="demo2"></div>
  42.     </div>
  43. </div>
  44. <script>
  45. <!--
  46. var speed=10;
  47. var tab=document.getElementById("demo");
  48. var tab1=document.getElementById("demo1");
  49. var tab2=document.getElementById("demo2");
  50. tab2.innerHTML=tab1.innerHTML;
  51. function Marquee(){
  52. if(tab2.offsetWidth-tab.scrollLeft<=0)
  53. tab.scrollLeft-=tab1.offsetWidth
  54. else{
  55. tab.scrollLeft++;
  56. }
  57. }
  58. var MyMar=setInterval(Marquee,speed);
  59. tab.onmouseover=function() {clearInterval(MyMar)};
  60. tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
  61. -->
  62. </script>
  63. </body>
  64. </html>

div+css+javascript 走马灯图片轮换显示的更多相关文章

  1. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  2. JavaScript之图片轮换

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

  3. 不定高度的div背景或背景图片不显示问题

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. ...

  4. Html5 Css实现方形图片 圆形显示

    <!doctype html><html><head><meta charset="utf-8"><title>方形图片 ...

  5. DIV+CSS如何让图片和文字在同一行！

    在div+css布局中,如果一行(或一个DIV)内容中有图片和文字的话,图片和文字往往会一个在上一个在下,这是一个新手都会遇到问题,我的解决方法有三: 1.添加CSS属性:vertical-align ...

  6. 网页首页制作总结（div+css+javascript）

    一.对网页整体布局,分几个版块 如下图所示: 确定布局之后,规划好网页,准备素材,按照标准文档流的顺序,从上到下,从左到右写入代码. 以上图为例,分为两部分,红色的主体部分和页脚.主体部分分割为头部. ...

  7. css——手机端图片正确显示

    这两天遇到的问题汇总(一): 1.图片在app端显示有差异:如下                        左边图片是:图片显示太大,以至于让整个页面都失真的效果:右边是调好样式之后的效果,知道增 ...

  8. css使Img图片居中显示

    <div class="flex-center listing-img"> <img v-if="item.imgUrl" v-bind:sr ...

  9. DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码

    (含上下左右滚动代码) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. Emacs入门快捷键

    打开emacs开始一个程序最基本操作: 1.打开Emacs,执行 $ emacs 2.建立一个新的程序文件. 按C-x C-f 然后在屏幕的底部出现minibuffer,光标提示你输入文件名称, 文件 ...

  2. Python初学

    经同学推荐,学习了下Python语言,看Python的介绍,它本身是一个面向对象的解释型脚本语言,我初看到这句话的时候就在想,一个脚本语言还搞成面向对象?有这个必要么?原谅我肤浅了一把. 它还被俗称为 ...

  3. linux cat命令的<<EOF

    初初开始学习linux的命令,只对linux一些简单命令有一些了解! 首先我看到网上有一些创建一个文件采用的命令是(mkdir创建文件夹):cat > test1.txt <<EOF ...

  4. 在CentOS 7下试验Drupal 7

    按顺序安装好Apache.MariaDB和PHP,启动Apache和MariaDB,创建一个UTF-8字符集的数据库. > create database if not exists drupa ...

  5. Android基础学习之context

    Context既是环境变量,也是句柄(handler),也是上下文.类似用使用工具的工具,比如写字来说,笔是工具,Context可以看成是手,用来使用笔.context具有唯一性,具有很多种行为(定义 ...

  6. 安装好ubuntu之后要干的几件事

    安装完ubuntu之后啊,系统除了自带了firefox,libre office等能用,要应付日常需求还差了些.然后我根据最近我的需求写了个清单.完成这个清单就让ubuntu成了一个得心应手的好工具了 ...

  7. LFS，编译自己的Linux系统 - 完成准备工作

    $LFS 确保环境变量$LFS已被定义. 定义:export LFS=/mnt/lfs 检查:echo $LFS 建立目录 $LFS/tools $LFS/tools目录用于存放和编译一些临时使用的工 ...

  8. 过滤ASCII码中的不可见字符, ASCII三部分, 各控制字符详解, 去^@,^M

    今天产品部同事报告了一个BUG,经过调试发现,由于用户输入的字符串中,包含字符0x1E, 也就是”记录分隔符”(Record Separator, Notepad++ 显示为[RS]),导致JavaS ...

  9. 百度地图LV1.5实践项目开发工具类bmap.util.jsV1.3

    /** * 百度地图使用工具类-v1.5 * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email b ...

  10. ※数据结构※→☆非线性结构（tree）☆============二叉树 顺序存储结构（tree binary sequence）（十九）

    二叉树 在计算机科学中,二叉树是每个结点最多有两个子树的有序树.通常子树的根被称作“左子树”(left subtree)和“右子树”(right subtree).二叉树常被用作二叉查找树和二叉堆或是 ...