具体源码如下：

<!doctype html>

<html lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="keywords" content="关键字1,关键字2" />

        <meta name="Description" content="描述信息" />

        <title>水平循环滚动</title>

        <!--CSS/JS-->

        <style type="text/css">

            *{margin:0;padding:0;}

            ul,li{list-style:none;display:block;}

            #scrollBox{background: #FFF;margin:40px auto;overflow:hidden;border: 1px dashed #CCC;width: 500px;}

            #scrollBox #con1,#scrollBox #con2{float:left;margin-left:10px;}

            #innerdiv {float: left;width: 800%;}

        </style>

    </head>

 <body>

        <!--div-->

    <div id="scrollBox">

        <div id="innerdiv">

            <div id="con1">

                <a href="#"><img src="1.jpg" height="120" width="192"></a>

                <a href="#"><img src="2.jpg" height="120" width="192"></a>

                <a href="#"><img src="3.jpg" height="120" width="192"></a>

                <a href="#"><img src="4.jpg" height="120" width="192"></a>

                <a href="#"><img src="5.jpg" height="120" width="192"></a>

                <a href="#"><img src="6.jpg" height="120" width="192"></a>

                <a href="#"><img src="7.jpg" height="120" width="192"></a>

                <a href="#"><img src="8.jpg" height="120" width="192"></a>

                <a href="#"><img src="9.jpg" height="120" width="192"></a>

            </div>

            <div id="con2"></div>

        </div>

    </div>

    <script type="text/javascript">

                var area =document.getElementById('scrollBox');

                var con1 = document.getElementById('con1');

                var con2 = document.getElementById('con2');

                con2.innerHTML=con1.innerHTML;

                 area.scrollLeft=0;

               function scrollUp(){

                if(area.scrollLeft>=con2.offsetWidth){

                    area.scrollLeft=0;

                }else{

                    area.scrollLeft+=5;

                }

                }

                var time = 50;

                var mytimer=setInterval(scrollUp,time);

                area.onmouseover=function(){

                    clearInterval(mytimer);

                }

                area.onmouseout=function(){

                    mytimer=setInterval(scrollUp,time);

                }

                /*

                var speed=10; //数字越大速度越慢

                var tab=document.getElementById('scrollBox');

                var tab1=document.getElementById('con1');

                var tab2=document.getElementById('con2');

                tab2.innerHTML=tab1.innerHTML;

                function Marquee(){

                if(tab2.offsetWidth-tab.scrollLeft<=0)

                tab.scrollLeft-=tab1.offsetWidth

                else{

                tab.scrollLeft++;

                }

                }

                var MyMar=setInterval(Marquee,speed);

                tab.onmouseover=function() {clearInterval(MyMar)};

                tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

                */

        </script>

 </body>

</html>

效果预览：GitHub

JS特效——图片水平滚动的更多相关文章

  1. [iOS] UICollectionView实现图片水平滚动

    最新更新: 简单封装了一下代码,参考新文章:UICollectionView实现图片水平滚动 先简单看一下效果: 新博客:http://wossoneri.github.io 准备数据 首先先加入一些 ...

  2. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  3. 【demo练习三】：图片水平滚动、点击按钮变更图片动画

    要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...

  4. JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。

    一:html部分 <body> <input id="btn1" type="button" value="向左"> ...

  5. [iOS] WSHorizontalPickerView 图片水平滚动封装

    之前这篇文章传送门本来是记录自己练手的demo的,后来很多人来问我要代码.今天就抽时间封装了一下,没有考虑太多情况,等我有空再去仔细考虑吧. 代码在:Github 用法很简单,创建对象,设置数据源,记 ...

  6. Android_ViewPager_实现多个图片水平滚动

    1.示意图                       2.实现分析 (1).xml配置 <!-- 配置container和pager的clipChildren=false, 并且指定margi ...

  7. Android ViewPager实现多个图片水平滚动

    1.示意图                       2.实现分析 (1).xml配置 <!-- 配置container和pager的clipChildren=false, 并且指定margi ...

  8. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

  9. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

随机推荐

  1. IOS开发－OC学习－Info.plist文件解析

    Info.plist文件是新建ios项目完成后自动生成的一个配置文件,在Xcode中如下图: 通过解析可以获得配置的具体细节,解析过程如下: // 定义一个nsstring用来获取Info.plist ...

  2. Outlook 2013 电子邮件账户设置备份与恢复

    与之前版本不同,Outlook 2013需要备份以下注册表内容:HKEY_CURRENT_USER\Software\Microsoft\Office\15.0\Outlook\Profiles恢复时 ...

  3. python and or用法

    and 和 or 是python的两个逻辑运算符,可以使用and , or来进行多个条件内容的判断.下面通过代码简单说明下and  or的用法: 1. or:当有一个条件为真时,该条件即为真.逻辑图如 ...

  4. NPM 简单实用说明

    https://nodejs.org/en/download/ 下载并按照,直接下一步就可以,最后会在C:\Program Files 新建一个nodejs文件夹,里面有一个node.exe.双击就启 ...

  5. Object.create() 实现

    if (typeof Object.create !== 'function') { Object.create = function (o) { function F() {} F.prototyp ...

  6. dubbo框架揭秘之服务引用

    ApplicationConfig config = new ApplicationConfig("hello-worldp"); RegistryConfig reg = new ...

  7. php redis 函数手册

    Redis::__construct构造函数$redis = new Redis();connect, open 链接redis服务参数host: string,服务地址port: int,端口号ti ...

  8. iOS 之 Property List

    1. 概念 用于存储串行化对象,xml格式,存储到plist文件中. 2. 用途 存储用户设置. 3. 优点 程序运行时可动态创建和读写. 4. 使用说明 4.1. 获取plist文件 NSStrin ...

  9. 使用ProgressDialog创建进度对话框

    ProgressDialog代表了进度对话框,程序只要创建ProgressDialog实例,并将它显示出来就是一个进度对画框.使用ProgressDialog创建进度对话框有如下两种方式. ①如果只是 ...

  10. JS模板引擎：基于字符串拼接

    目的 编写一个基于字符串拼接的js模板引擎雏形,这里并不会提供任何模板与数据的绑定. 基本原理 Javascript中创建函数的方式有多种,包括: 1. var func = function () ...