效果如图

<!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. Linux脚本中使用特定JDK

    有时linux系统中装了很多应用,我们又不能覆盖系统中设置的版本,此时我们就需要在脚本文件中设置特定版本. export JAVA_HOME= export CLASSPATH=.:$JAVA_HOM ...

  2. （原+转）ubuntu16中莫名死机及重新安装显卡驱动

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5992693.html 参考网址: http://blog.csdn.net/u012581999/ar ...

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

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

  4. jQuery模拟瀑布流布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 使用jekyll主题

    github上面有很多基于jekyll的主题 https://github.com/theme4jekyll 使用起来也非常方便.直接clone到本地 这些主题,包括了很多模板,在新建博客的时候可以在 ...

  6. UPX和WinUpack压缩壳的使用和脱法 - 脱壳篇06

    UPX和WinUpack压缩壳的使用和脱法 - 脱壳篇06 让编程改变世界 Change the world by program 今天小甲鱼给大家介绍两款压缩壳:UPX和WinUpack. UPX是 ...

  7. appsettings.json

    appsettings.json 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 在我们之前的Asp.net mvc 开发中,一提到配置文件,我们不由的想到 web.conf ...

  8. information_schema.optimizer_trace学习

    information_schema.optimizer_trace 用于追踪优化器的优化过程:通常来说这张表中是没有数据的,要想开户追踪要把 @@session.optimizer_trace='e ...

  9. 关于css浮动的一些总结

    首先给浮动一个定义吧 浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次. 从测试中来看 元素之间的浮动关系是根据上一个元素来判断的如果上一个元素是浮动的它会跟在浮动元素 ...

  10. 电子工程师名片——SPI NOR Flash

    使用了MX25L512的SPI接口的Flash 电路连接图: 总的大小512kb,即64kB,sector的大小为256 Bytes,block的大小为4k Bytes 调试时出现的问题: 1.Fla ...