<!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. 为树莓派（Raspberry pi 2）安装raspbian系统，并用windows自带的远程桌面连接登录

    准备工作 树莓派2开发板(保险起见,请装上散热片和风扇): 手机充电器和数据线(输出电压为5V,输出电流为1~2A,电流视开发板上所接附件多少而定): class10 sd小卡,还需要卡架或读卡器: ...

  2. checkbox 自动换行

    把匹配的checkbox和文字用一对span标签包裹 并且给这个span标签加样式 display:inline-block <span style="display:inline-b ...

  3. vue2.0中怎么获取元素

    在元素上添加 v-el:food-wrapper (不用驼峰的写法) vue1版本 报错: vue2版本 (vue2把vue1中的 v-el 改为了 ref vue1 v-el:foods-wrapp ...

  4. 【重点突破】—— Vue1.0到Vue2.0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...

  5. 2016.6.20 eclipse安装完毕后打开失败，显示a JDK or a JRE must be avaliable in order to run Eclispe

    下载完成后,点击eclipse.exe,跳出如下错误. 按照百度的方法,修改了一下eclispe的配置文件,不仅没解决问题,结果跳出另一个新的错误: Failed to load the JNI sh ...

  6. InnoDB Insert（插入）操作（下）--mysql技术内幕

    接上一篇文章,最后做的那个实验,我是想证明mysql innodb存储引擎,commit操作与flush数据到磁盘之间的关系,当与同事交流之后,他说,你应该把innodb_buffer_size的大小 ...

  7. Scanner遇上UnmappableCharacterException

    上周末的时候.朋友约好去KTV,鉴于我这样的不怎么听歌的孩子伤不起啊,灵机一动就把我的酷狗歌单导出来了,XML文件嘛,内容太多,我仅仅想要歌名足已. 于是写了一个java去输出歌名.     岂料我受 ...

  8. java将一个或者多个空格进行分割

    public static void main(String[] args) { String s = "GET /index.html HTTP/1.1";//字符串s由“GET ...

  9. Xen on Ubuntu

    实验环境 ubuntu-14.04.1-desktop-amd64.iso Recommended reference: https://help.ubuntu.com/community/Xen h ...

  10. 配置fio支持rbd測试引擎

    fio的rbd測试引擎能够非常方便的对rbd进行測试.以下示范怎样安装fio支持rbd引擎. git clone git://git.kernel.dk/fio.git $ cd fio $ ./co ...