<!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. ARCGIS 二次开发可以参考的资源（长期更新）

    背景: 今天,被领导教导,说是你刚入职,要尽快把项目做起.言语忠恳,而且说不要再在电脑上练习那些小的测试例子了,要直接切入项目,熟悉项目的开发框架,与设计理念.得到,我的负责人(TB)把他做的项目的资 ...

  2. 【Android】attr、style和theme

    一.Attr 属性,风格样式的最小单元: Attr 的定义 在自定义 View 的时候,在 res/attrs.xml 文件中声明属性,而Android 系统的属性也是以同样的方式定义的.比如 lay ...

  3. Python爬虫抓取东方财富网股票数据并实现MySQL数据库存储

    Python爬虫可以说是好玩又好用了.现想利用Python爬取网页股票数据保存到本地csv数据文件中,同时想把股票数据保存到MySQL数据库中.需求有了,剩下的就是实现了. 在开始之前,保证已经安装好 ...

  4. 国家商用password（五）基于SM2的软件授权码生成及校验

    将公开密钥算法作为软件注冊算法的优点是Cracker非常难通过跟踪验证算法得到注冊机.以下.将介绍使用SM2国密算法进行软件注冊的方法. 生成授权码 选择SM2椭圆曲线參数(P,a,b,N,Gx,Gy ...

  5. 【温故知新】——CSS黑魔法小技巧可以少些不必要的js

    前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求 ...

  6. 2016.10.18kubernetes 的8080和6443端口的区别与联系

    由看过的资料知道,可以使用kubectl,client libraries和REST请求来访问api.   来自官方资料: By default the Kubernetes APIserver se ...

  7. linux中shell脚本中系统预先定义的变量

    $0:脚本名称: $*:所有参数: $$:当前进程或者脚本的PID号: $!:后台运行的最后一个进程的PID号: $?:用于返回上一个命令是否成功.成功0,否则为非零: $#:参数个数: $@:所有参 ...

  8. android MPChart图标使用具体解释

    近期项目里有要加入更加复杂的图标了,曾经一些简单的曲线图,饼状图.风险指示图等,都是自己画.随着难度的添加.越来越力不从心.曾经研究过achartenginee图标框架,但发现achartengine ...

  9. Andfix热修复框架原理及源代码解析-上篇

    热补丁介绍及Andfix的使用 Andfix热修复框架原理及源代码解析-上篇 Andfix热修复框架原理及源代码解析-下篇 1.不知道怎样使用的同学,建议看看我上一篇写的介绍热补丁和Andfix的使用 ...

  10. Swift初窥----语法进阶

    缺省绑定(Optional Binding 自己主动置空) 通过在类型变量后,加上?,能够实现缺省绑定为nil var window: UIWindow? 就是说,假设不正确window赋值,则win ...