<!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. 测试Apache服务器及httpd: Could not reliably determine the server's fully qualified domain name解决办法

    测试Apache服务器: 重启apache: sudo /usr/local/apache/bin/apachectl restart 若出现错误: httpd: Could not reliably ...

  2. 如何查看linux版本 如何查看LINUX是多少位

    一.如何得知自己正在使用的linux是什么版本呢,下面的几种方法将给你带来答案! 1. 查看内核版本命令: 1) [root@q1test01 ~]# cat /proc/version Linux ...

  3. SSO单点登录系列1:cas客户端源码分析cas-client-java-2.1.1.jar

    落雨 cas 单点登录 希望能给以后来研究cas的兄弟留下一点思路,也算是研究了两天的成果,外国人的代码写的很晦涩,翻译下来也没有时间继续跟进,所以有错误的还请大家跟帖和我讨论,qq 39426378 ...

  4. 16. Spring Boot使用Druid（编程注入）【从零开始学Spring Boot】

    转载:http://blog.csdn.net/linxingliang/article/details/52001744 在上一节使用是配置文件的方式进行使用druid,这里在扩散下使用编程式进行使 ...

  5. Python 可视化Twitter中指定话题中Tweet的词汇频率

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-8 @author: guaguastd @name: pl ...

  6. MYSQL索引优化思维导图

    有关索引的优化.MYSQL索引优化     文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing

  7. iPhone X

    iPhone X前置深度摄像头带来了Animoji和face ID,同时也将3D Face Tracking的接口开放给了开发者.有幸去Cupertino苹果总部参加了iPhone X的封闭开发,本文 ...

  8. Android Activity间动画跳转

    本博文主要介绍activity间动画跳转的问题,在这里讲一下怎么设置全部activity的动画跳转和退出跳转.事实上有些软件已经这样做了.比方我们都比較熟悉的大众点评网. 以下我们通过一个实例来看一下 ...

  9. Chrome禁用NPAPI插件(包含 Silverlight、Java 和 Unity)

    过去,很多插件都是使用一种称为NPAPI 的旧系统开发的. 现在,仅仅有少量站点在使用NPAPI 插件,由于这些插件有时会给站点带来安全风险. 为了让用户获得更安全.更高速且更稳定的 Chrome 浏 ...

  10. POJ 2155 Matrix(二维树状数组，绝对具体)

    Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 20599   Accepted: 7673 Descripti ...