<!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>JavaScript代码实现图片循环滚动效果</title>

<style type="text/css">

.list{

    width:100px;

    height:100px;

}

</style>

</head>

<body>

    <div id="demo" style=" overflow: hidden; width: 1308px; height: 166px;">

        <table border="0" cellspacing="0" cellpadding="0">

            <tr>

                <td valign="top" id="marquePic1">  <!--align="right" 水平右对齐  valign="top" 垂直上对齐  -->

                <!-- 要循环滚动的图片 -->

                    <table width="1308" border="0" align="center" cellpadding="0" cellspacing="0" >

                        <tr align="center">

                            <td> <img class="list" src="../../千图网图片/_NRQkwv-I.jpg" border="1" /> </td>

                            <td> <img class="list" src="../../千图网图片/0df431adcbef76096709930527dda3cc7cd99e2d.jpg" border="1" /> </td>

                            <td> <img class="list" src="../../千图网图片/1.png" border="1" /> </td>

                            <td> <img class="list" src="../../千图网图片/2.png" border="1" /> </td>

                            <td> <img class="list" src="../../千图网图片/3.png" border="1" /> </td>

                            <td> <img class="list" src="../../千图网图片/4.png" border="1" /> </td>

                            <td> <img class="list" src="../../千图网图片/5.png" border="1" /> </td>

                            <td> <img class="list" src="../../千图网图片/6.png" border="1" /> </td>

                        </tr>

                    </table>

                </td>

                <td id="marquePic2" width="1"></td>

            </tr>

        </table>

    </div>

</body>

<script language="javascript">

var speed = 30 ; //设置间隔时间

marquePic2.innerHTML = marquePic1.innerHTML;

var demo = document.getElementById("demo"); //获取demo对象

function Marquee(n){ //实现图片循环滚动的方法

    if(marquePic1.offsetWidth-demo.scrollLeft<=0){

    demo.scrollLeft = 0;

    }else{

    demo.scrollLeft = demo.scrollLeft+n;

    }

}

var MyMar = setInterval("Marquee(5)",speed);

demo.onmouseover = function() { //停止滚动

clearInterval(MyMar);

}

demo.onmouseout = function() { //继续滚动

MyMar = setInterval("Marquee(5)",speed);

}

</script>

</html>

参数说明：

1. function：要调用的JavaScript自定义函数名称。

2. Milliseconds：设置超时时间（以毫秒为单位）。

功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。

特殊例子--JavaScript代码实现图片循环滚动效果的更多相关文章

  1. 图片循环滚动效果shader

    背景无限循环滚动效果,有X和Y轴的速度控制,方便控制.见下图,操作步骤同之前的背景循环设置. shader如下: Shader "Custom/Scroll" { Properti ...

  2. cocos2d（背景图片循环滚动）

    背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...

  3. 使用UIScrollView 结合 UIImageView 实现图片循环滚动

    场景: 在开发工作中,有时我们需要实现一组图片循环滚动的情况.当我们使用 UIScrollView 结合 UIImageView 来实现时,一般 UIImageView 会尽量考虑重用,下面例子是以( ...

  4. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  5. DIV+javascript实现首尾相连循环滚动效果

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

  6. marquee 实现首尾相连循环滚动效果

    <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等  marquee标签不是HTML3.2 ...

  7. 如何在HTML中实现图片的滚动效果

    <MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"& ...

  8. Expression Blend4经验分享：文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  9. unity 背景无限循环滚动效果

    背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...

随机推荐

  1. Java Web开发（JSP、Servlet）乱码的一揽子解决方案

    千万不要看网上那些杂七杂八的解决乱码的文章,解决乱码最好的方法是(没有之一):在所有地方统一采用UTF-8编码. 这其中包括: 1 - 工程 如果使用的是Eclipse,那么打开Preference, ...

  2. AOP技术应用于安全防御与漏洞修复

    本文用到的技术 AOP ESAPI 关于AOP技术 AOP(Aspect-Oriented Programming)面向切面编程.切面是什么?切面表示从业务逻辑分离出来的横切逻辑,比如性能监控.日志记 ...

  3. shell脚本中数组array常用技巧学习实践

    shell中数组的下标默认是从0开始的 1.将字符串放在数组中,获取其长度 #!/bin/bashstr="a b --n d"array=($str)length=${#arra ...

  4. json-path解析json方便可靠

    JsonPath is to JSON what XPATH is to XML, a simple way to extract parts of a given document. JsonPat ...

  5. Docker 开源管理工具集锦

    俗话说工欲善其事.必先利其器.Docker 是一种详细的虚拟化技术,Docker 尽管以RestAPI形式提供服务.但在实际生产环境中,管理大规模集群部署的Docker容器确实是一个巨大的挑战.尽管D ...

  6. linux 查找并操作

    find -depth 1 -name 'aa*' | xargs tar -cvf aa.tar 这个命令将为查找当前目录下的所有已aa开头的文件,然后将所有结果"执行打包",打 ...

  7. robot framework selenium2library定位

    进行页面元素操作,最麻烦的莫过于元素定位了,经常提示element is not visible 或者element is not exist 下面介绍常见的定位方法和定位中的问题 1 使用name和 ...

  8. HTTP状态码中301与302的区别

    301 Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一.如果可能,拥有链接编辑功能的客户端应当自动把请求的地址修改 ...

  9. 数据库sql的join多表

    摘录文章 SQL join 用于根据两个或多个表中的列之间的关系,从这些表中查询数据.注意,join后的数据记录数不一定就是左或右表的简单连接,图表只代表集合关系,在数量上并不准确,如这个条件后结果, ...

  10. Bootstrap学习速查表（四） 栅格系统

    Bootstrap框架的网格系统工作原理如下: 1.数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding).如: 2.在行(.row)中可以添加 ...