具体源码如下：

<!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. [Angular Tutorial] 1-Static Template

    为了说明Angular如何扩展了标准的html,您将会创建了一个纯粹的静态html页面,并且看到我们如何将这些html代码转换成Angular能动态展示相同结果的模板. 在这一步您将会在一个html页 ...

  2. Centos下关于ssh、scp与rsync设置与应用

    最近应公司要求,需要对文件数据进行远程传输与备份操作,特此写了一篇文章记录下了关于ssh.scp以及rsync的应用配置全过程,可能过程太过罗嗦,但主要就是想在不遗漏每个过程的情况下对此进行阐述,希望 ...

  3. jquery proxy

    slice = Array.prototype.slice,// Bind a function to a context, optionally partially applying any // ...

  4. vim设置注意记录

    set vb t_vb= setlocal buftype = "解决不能保存buff错误

  5. Delphi中解析Xml的控件-SimDesign NativeXml

    Delphi中解析Xml的控件-SimDesign NativeXml 正在学习,感觉应用很方便.无源代码的版本还是免费的. SimDesign.NativeXml是一个delphi和bcb的XML控 ...

  6. Delphi判断一个字符是否为汉字的最佳方法

    //判断字符是否是汉字 function IsHZ(ch: WideChar): boolean; var i:integer; begin i:=ord(ch); if( i<19968) o ...

  7. js动态控制table的tr，td增加及删除

    html: <table id='wifi_clients_table'   class="table table-striped table-bordered table-hover ...

  8. Spark算子总结及案例

    spark算子大致上可分三大类算子: 1.Value数据类型的Transformation算子,这种变换不触发提交作业,针对处理的数据项是Value型的数据. 2.Key-Value数据类型的Tran ...

  9. 支持Angular 2的表格控件

    前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...

  10. 转载：深入探讨 Java 类加载器

    转载地址 : http://www.ibm.com/developerworks/cn/java/j-lo-classloader/ 深入探讨 Java 类加载器 类加载器(class loader) ...