具体源码如下：

<!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. SVN打基线

    分成trunk.tags.branches的话,那直接从trunk copy 到tags下面就可以或者按照你自己的目录,只要规定好就行 选择要打基线的项目的根目录,右击鼠标,在弹出的菜单中选择“分支/ ...

  2. 数字规律：Pascal‘s triangle

    Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in pol ...

  3. leetcode day7

    这道题弄的心好累..  [Reverse Linked List]206 描述: Reverse a singly linked list. click to show more hints. Hin ...

  4. Linux之文件过滤分割与合并

    文件过滤分割与合并 1.grep命令 grep(global regular expression print)全面搜索正则表达式并把行打印出来,是一种强大的文本搜索工具,它能使用正则表达式搜索文本, ...

  5. [Angular Tutorial] 9 -Routing & Multiple Views

    在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.h ...

  6. 谈谈如何从Apache官网扒文档

    学习java的猴子至少要会看文档, 一.从Apache官网下载文档 进入官网--components--例如点击FileUpload--点击最下面browser download area--点击bi ...

  7. PHP与MySql建立连接

    通过PHP脚本建立与一个MySQL数据库的连接时,数据库服务器的主机位置(在本地就是localhost).用户名(root).密码.和数据库名是必须的.一旦建立连接,脚本就能执行SQL命令.二者联系的 ...

  8. iOS 之 手势

    手势操作,有一个总的抽象类UIGestureRecognizer,用于检测设备的所有手势.其下有多个子类: 拍击UITapGestureRecognizer (任意次数的拍击) 向里或向外捏UIPin ...

  9. jq hide show

    var $ = function (id) { return document.getElementById(id); } //返回dom元素的当前某css值 var getCss = functio ...

  10. Mybatis学习（8）逆向工程

    什么是逆向工程: mybaits需要程序员自己编写sql语句,mybatis官方提供逆向工程 可以针对单表自动生成mybatis执行所需要的代码(mapper.java,mapper.xml.po.. ...