效果如图

<!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. SPOJ QTREE 系列解题报告

    题目一 : SPOJ 375 Query On a Tree http://www.spoj.com/problems/QTREE/ 给一个树,求a,b路径上最大边权,或者修改a,b边权为t. #in ...

  2. UVA 221 - Urban Elevations（离散化）!!!!!!

    题意:给出一张俯视图.给出N个建筑物的左下标,长度,宽度,高度.现在求,从南面看,能看到那些建筑? Sample Input 14 160 0 30 60 30 125 0 32 28 60 95 0 ...

  3. xyiyy开始写博客了

    拖延症一直到现在才开始写博客... 希望写的博客对大家能有一些帮助,有不恰当或者不对的地方,还望大家指出. 以下为我的两个昵称:fraud xyiyy

  4. （原）C++中测试代码执行时间

    转载请注明出处(不过这个用法网上到处都是): http://www.cnblogs.com/darkknightzh/p/4987738.html LARGE_INTEGER nFreq, nBegi ...

  5. oracle的nvl和sql server的isnull函数

    最近公司在做Oracle数据库相关产品,在这里作以小结: ISNULL()函数 语法     ISNULL ( check_expression , replacement_value)  参数    ...

  6. 关于C语言静态链接的个人理解，欢迎指正

    摘要:本篇主要介绍在静态链接中多个文件合并.地址确定.符号解析和重定位相关问题,以GCC编译器为例.     首先,链接器链接多个文件时,采用何种方式合并为一个文件?方式一,按序叠加,即多个文件依次叠 ...

  7. Asp.Net MVC+EF+三层架构的完整搭建过程

    架构图: 使用的数据库: 一张公司的员工信息表,测试数据 解决方案项目设计: 1.新建一个空白解决方案名称为Company 2.在该解决方案下,新建解决方案文件夹(UI,BLL,DAL,Model) ...

  8. [TYVJ] P1030 乳草的入侵

    乳草的入侵 背景 Background USACO OCT09 6TH   描述 Description Farmer John一直努力让他的草地充满鲜美多汁的而又健康的牧草.可惜天不从人愿,他在植物 ...

  9. 使用Qt编写服务器端程序（包括Http传输服务器端）的方法

    使用Qt编写客户端的程序的示例或demo较多,但是编写服务器端程序的demo很少.当然,服务器端的程序一般不需要带界面,这点我们可以理解.不过有些时候我们还是需要使用Qt编写一个简单的测试用的服务器代 ...

  10. javascript之全局函数

    一.eval() //执行一段字符串中的javascript代码. 语法:eval(code); //可以将javascript写在字符串里面执行. var str = "document. ...