<!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. C#获取程序所在的目录

    有的时候,我们需要读取程序所在目录下的一些文件,最常见的写法是直接通过".\xxx.file"之类的相对路径来获取文件.虽然这种写法大多数的时候能正确工作,但却又一个很大的隐患:程 ...

  2. java加载类的方法1.classloader 2.class.forName()

    java加载类的方法1.classloader 2.class.forName() 加载一个类后,是在方法去创建这个类的元信息class对象,在方法区立刻创建.在方法区创建.

  3. kindeditor编辑器，获取textarea值

    在获取textarea值的时候,从数据库读出来的值都能获取到,但是新输入的值就得不到,只要是新输入的都得不到值 答案: 我昨天刚用kindeditor,我是使用ajaxForm提交表单的在360浏览器 ...

  4. HDU1087上升子序列的最大和

     解法一 此题是一个简单的动态规划问题,用dp[i]记做最后一步经过第i个数所得到的最大sum值,则结果=max(dp[i]),i=1,...n.考虑dp[i]的前一步会经过那里?假设dp[i]的前一 ...

  5. 漫谈程序员系列：3D打印能打印出程序员吗

    首先声明,本文是一本正经的胡扯,绝不是随随便便的胡扯,请您不要随便攻击我胡说八道.我要反复星爷在<喜剧之王>里的台词:事实上.我是一本正经的喷子. 3D打印的定义 关于3D打印,以下是来自 ...

  6. js CacheQueue

    (function(){ var CacheQueue=function(name,weightValue,maxLength,clearTimerTime){ //public this.name ...

  7. 2017.3.14 activiti实战--第二十章--REST服务

    学习资料:<Activiti实战> 第二十章 REST服务 20.1 通信协议概述 略. 20.2 REST API概述 资源分类 资源基础URI 说明 Deployments manag ...

  8. 转: CSRF(Cross Site Request Forgery 跨站域请求伪造) 背景与介绍

    from:  https://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/   在 IBM Bluemix 云平台上开发并部署您的下一个应用 ...

  9. 怎样通过Html网页调用本地安卓app

    怎样使用html网页和本地app进行传递数据呢?经过研究.发现还是有方法的,总结了一下,大致有一下几种方式 一.通过html页面打开Android本地的app 1.首先在编写一个简单的html页面 & ...

  10. es6 includes(), startsWith(), endsWith()

    传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6 又提供了三种新方法. includes():返回布尔值,表示是否找到了参数字符串. sta ...