效果如图

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>图片滚动</title>

</head>

<body>

<style type="text/css">

 <!--

 #demo {

 background: #FFF;

 overflow:hidden;

 border: 1px dashed #CCC;

 width:500px;

 }

 #demo img {

 border:3px solid #F2F2F2;

 }

 #indemo {

 float:left;

 width:800%;

 }

 #demo1 {

 float:left;

 }

 #demo2 {

 float:left;

 }

 -->

</style>

    <div id="demo">

        <div id="indemo">

            <div id="demo1">

                <a href="#"><img src="http://www.trip-j.net/images/hotelimg/6614/200811201335594038.jpg" border="0" /></a>

                <a href="#"><img src="http://www.trip-j.net/images/hotelimg/2457/20081061952145229.jpg" border="0" /></a>

                <a href="#"><img src="http://www.trip-j.net/images/hotelimg/2574/20081091921231611.jpg" border="0" /></a>

                <a href="#"><img src="http://www.trip-j.net/images/hotelimg/2395/20081062005358398.jpg" border="0" /></a>

                <a href="#"><img src="http://www.trip-j.net/images/hotelimg/3564/20081191214549634.jpg" border="0" /></a>

                <a href="#"><img src="http://www.trip-j.net/images/hotelimg/3129/20081091715454669.jpg" border="0" /></a>

            </div>

        <div id="demo2"></div>

    </div>

</div>

<script>

<!--

var speed=10;

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

-->

</script>

</body>

</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. Ubuntu14.04上安装tftpd服务

    首先sudo apt-get install tftpd-hpa,  tftp-hpa 然后sudo vim /etc/default/tftpd-hpa 配置文件如下 TFTP_USERNAME=& ...

  2. 读《疯狂Ajax讲义》重点

    1.XMLHttpRequest() 请求的写法(p62) 一个类XMLHttp 因该包含的接口:[1]  XMLHttp.sendRequest("POST",URL,data, ...

  3. （原）使用intel的ipp库计算卷积及相关

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5462631.html 参考网址: https://software.intel.com/zh-cn/n ...

  4. js倒计时 重发 效果

    <script type="text/javascript"> window.onload = function() { var wait = 60; function ...

  5. JAVA操作properties文件

    va中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值"的格式,在properties ...

  6. shell date格式化输出

    1-  echo `date "+%Y-%m-%d %H:%M:%S"` 2014-11-13 15:06:26 2-  echo `date "+%y-%m-%d %H ...

  7. 在virtualenv中安装libxml2和libxslt

    在使用python的工作中,需要使用到libxml2和libxslt库.原来在实际环境中已经安装完成了,但是在virtualenv中还没有,现在正在整理virtualenv的环境.下面把在virtua ...

  8. static的用法解析

    PHP中static变量的使用范围要更广一些,我们不仅可以在类,方法或变量前面添加static修饰符,我们甚至还能给函数内部变量添加static关键字.添加了static修饰符的变量即使在该函数执行完 ...

  9. 【iOS开发】collectionView 瀑布流实现

    一.效果展示 二.思路分析 1> 布局的基本流程 当设置好collectionView的布局方式之后(UICollectionViewFlowLayout),当系统开始布局的时候,会调用 pre ...

  10. TCLP 第一章 1.5字符输入输出

    #include <stdio.h> /* 将输入复制到输出:版本1 */ int main() { int c; /* 注意是int而不是char,除了存储char类型字符,还要存储EO ...