具体源码如下：

<!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. [NOI2011]阿狸的打字机（好题！！！！）

    2785: [NOI2011]阿狸的打字机 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 7  Solved: 3[Submit][Status][We ...

  2. js 如何判断鼠标点击事件还是js代码调用

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. 关于金额，重量等浮点数的数据库字段设计（用Int，Long代替浮点数计算）

    金额.重量.成绩等数据库字段推荐使用int或bigint类型. 通常我们数据库设计中金额,重量等涉及到小数位的字段会用float或decimal,mysql还可以用double,但往往每笔金额的计算我 ...

  4. #DP# ----- OpenJudge最大子矩阵

    OpenJudge 1768:最大子矩阵 总时间限制: 1000ms   内存限制: 65536kB 描述 已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大小至少是1 ...

  5. VS2013使用WebDeploy发布网站到IIS服务器

    VS2013用Web Deploy方式发布网站到IIS服务器发布文档 VS版本:VS2013 服务器版本:Windows Server 2012 R2 IIS版本:IIS8.0 Web Deploy版 ...

  6. JDK源码分析-Integer

    Integer是平时开发中最常用的类之一,但是如果没有研究过源码很多特性和坑可能就不知道,下面深入源码来分析一下Integer的设计和实现. Integer: 继承结构: -java.lang.Obj ...

  7. 关于MVC结构

    简单的记录,只是想记录一下现在对MVC的理解. MVC,即模型(MODEL),视图(VIEW),控制器(CONTROLLER) 模型是数据模型 视图是图形界面 控制器是在两个之间的控制部分,用来将数据 ...

  8. 源码(08) -- java.util.ListIterator<E>

    java.util.ListIterator<E> 源码分析(JDK1.7) ------------------------------------------------------- ...

  9. php类与构造函数解析

    关于类大家都有一定的认识这里只介绍在php中类值得注意的地方----类的创建----php使用关键字class创建一个类,并且使用一对大括号如: class name{ public $n=" ...

  10. jstl__报错

    1.缺少JAR:解决的办法就是手动将jstl.jar和 standard.jar这两个jar包加入到web项目的WEB-INF/lib目录中或者是把jstl.jar.standard.jar复制到to ...