具体源码如下：

<!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. 用编程的方式定义UI界面

    package com.example.administrator.test_hello_world; import android.app.Activity; import android.os.B ...

  2. 添加Pods依赖

    1. 添加所需文件 1.1. 添加 .podspec 文件 1.1.1.  创建 必须文件 使用命令 pod spec create name.podspec 或者直接拷贝一份 1.1.2.  添加内 ...

  3. event.returnValue和return false的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. mysql 和excel相互转换

    原文地址:http://blog.sina.com.cn/s/blog_43eb83b90100h0mc.html 今天是全国数学建模比赛,同学选的一个题目需要对一个large的Excel表格进行统计 ...

  5. 分布式cookie-session的实现(spring-session)

    分布式cookie-session的实现(spring-session) 本文使用的spring-session版本为 1.0.0,地址为: https://github.com/spring-pro ...

  6. 【转】 如何提高自己的acm个人能力

    2011-05-17 21:26 1429人阅读 评论(0) 收藏 举报 算法网络blog八卦游戏读书 转载自 简单de数字 最终编辑 fading_code by   zfy0701 本来以为HNU ...

  7. Ubuntu 安装wireshark

    参考:ubuntu下安装wireshark 依赖及相关包的安装 1.编译工具 apt-get install build-essential 2.GTK+的开发文件和GLib库(libraries) ...

  8. 如何将php数组或者对象传递给javascript

    在网上搜了一些方法,最后自己采用的是通过json字串的方式. 假设有一个php 数组 $arr,代码如下: 代码如下: <script> // html5中默认的script是javasc ...

  9. HDU1848-Fibonacci again and again

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1848 这个题目代码不是很复杂,但那个等价类,(SG函数)没怎么理解, 题目难,不过代码不怎么复杂,在网 ...

  10. ASP.NET MVC和jQuery DataTable整合

    本文包含代码示例说明如何jQuery插件开发者可以集成到ASP.NET MVC应用程序. 下载源代码- 87.4 KB Introduction The jQuery DataTables plug- ...