效果如图

<!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. Ubuntu13.04手动安装nvidia显卡驱动

    1. 下载最新版的nVidia驱动,命名为NVIDIA.run. http://www.nvidia.com/page/drivers.html 2.编辑blacklist.conf. sudo ge ...

  2. php常用mysql函数

    mysql_affected_rows: 得到 MySQL 最后操作影响的列数目. mysql_close: 关闭 MySQL 伺服器连线. mysql_connect: 开启 MySQL 伺服器连线 ...

  3. 函数内声明变量不加var和加var的区别

      这段代码说明了在函数中声明没加var关键字的变量时,会出现什么结果.   分两种不同的情况:   1.如果函数内没有同名的局部变量覆盖“无var变量”,那么它就是个全局变量,在函数外部也可以访问到 ...

  4. SSH 概念及使用详解

    注意:转载请注明出处:http://www.programfish.com/blog/?p=124 SSH 基本概念 SSH 英文全称是secure shell,字面意思:安全的shell. SSH协 ...

  5. python基础教程第4章——字典

    1.映射(mapping):通过名字引用值的数据结构.字典是Python中唯一内建的映射类型,字典中的值并没有特殊的顺序,但是都存储在一个特定的键(key)里.键可以是数字.字符串甚至是元组. 2.字 ...

  6. Taglib、EL、OGNL

    Taglib.EL.OGNL 阅读目录 1. Taglib(tag library) 标签库 2. EL(Expression Language) 表达式 3. OGNL(Object-Graph N ...

  7. performance_schema 变量

    performance_schema 这个变量来控制performance_schema库的禁用和启用 1.performance_schema的值说明 performance_schema=1 表示 ...

  8. 美国政府关于Google公司2013年度的财务报表红头文件

    请管理员移至新闻版块,谢谢! 来源:http://www.sec.gov/ 财务报表下载↓ 此文仅作参考分析. 10-K 1 goog2013123110-k.htm FORM 10-K   UNIT ...

  9. SQL Server 索引的自动维护 <第十三篇>

    在有大量事务的数据库中,表和索引随着时间的推移而碎片化.因此,为了增进性能,应该定期检查表和索引的碎片,并对具有大量碎片的进行整理. 1.确定当前数据库中所有需要分析碎片的表. 2.确定所有表和索引的 ...

  10. codecomb 2086【滑板鞋】

    题目背景 我的滑板鞋时尚时尚最时尚 回家的路上我情不自禁 摩擦 摩擦 在这光滑的地上摩擦 月光下我看到自己的身影有时很远有时很近 感到一种力量驱使我的脚步 有了滑板鞋天黑都不怕 题目描述 你在魅力之都 ...