<!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=utf-8" />
<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="./images/wall_s4.jpg" border="0" /></a>
            <a href="#"><img src="./images/wall_s4.jpg" border="0" /></a>
            <a href="#"><img src="./images/wall_s4.jpg" border="0" /></a>
            <a href="#"><img src="./images/wall_s4.jpg" border="0" /></a>
            <a href="#"><img src="./images/wall_s4.jpg" border="0" /></a>
            <a href="#"><img src="./images/wall_s4.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>

javascript 不间断向左滚动图片的更多相关文章

  1. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

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

  2. jquery 实现图片无缝向左滚动

    <script type="text/javascript" src="_pub/Script/jquery.js"></script> ...

  3. 二、JavaScript语言--JS实践--信息滚动效果制作

    运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...

  4. jquery图片无缝滚动代码左右 上下无缝滚动图片

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

  5. .net asp [转载]ASP:循环滚动图片的代码+解释

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

  6. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  7. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  8. jquery控制左右箭头滚动图片列表

    jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  9. (转载)无缝滚动图片的js和jquery两种写法

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

随机推荐

  1. Uber能知道你是不是在开车的时候玩手机

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. weblogic开发模式与生产模式介绍

    weblogic开发模式与生产模式介绍 开发模式:该模式启用自动部署 生产模式:该模式关闭自动部署 weblogic server 三种部署方法:自动部署.控制台部署.命令部署 自动部署:当其处于启用 ...

  3. php如何修改SESSION的生存时间

    如何修改SESSION的生存时间 我们来手动设置 Session 的生存期: <?phpsession_start(); // 保存一天 $lifeTime = 24 * 3600; setco ...

  4. PAT 1070. Mooncake (25)

    Mooncake is a Chinese bakery product traditionally eaten during the Mid-Autumn Festival.  Many types ...

  5. NavBarControl 左侧菜单

    (1)示例图片 具体实现: 一. using DevExpress.XtraNavBar; 二. 从窗体上拖一个 NavBarControl 控件 命名为:nbcLeft 三.窗体OnLoad 事件 ...

  6. 大型项目 Gradle 的常用库和版本管理[转]

    http://www.tuicool.com/articles/vqQZBrm 大型项目 Gradle 的常用库和版本管理 时间 2016-03-15 06:44:00  Mystra 原文  htt ...

  7. WebService基于SoapHeader实现安全认证（一）

    本文转载:http://www.cnblogs.com/houleixx/archive/2009/08/22/webservice-soapheader-security.html WebServi ...

  8. [每日一题] OCP1z0-047 :2013-08-12 view视图的描述哪些是正确的？

    正确答案是: CE 这是OCP教材中的: 1.简单视图与复杂视图的定义: 2.复杂视图通常不能被DML: .WITH CHECKOP TIONT选项 A不正确.简单视图可以被更新. hr@OCM> ...

  9. 第三篇——第二部分——第五文 配置SQL Server镜像——域环境SQL Server镜像日常维护

    本文接上面两篇搭建镜像的文章: 第三篇--第二部分--第三文 配置SQL Server镜像--域环境:http://blog.csdn.net/dba_huangzj/article/details/ ...

  10. a href=#与 a href=javascript:void(0) 的差别

    a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...