效果图

1.首先先看看html和css代码

<style>

    *{padding:0;margin:0;}

     #div1{margin:100px auto;background:red;width:712px;height:108px;position:relative;overflow:hidden;}

    #div1 ul{position:absolute;left:0;top:0;}

    #div1 ul li{list-style:none;float:left;width:178px;height:108px;}

    #a1{display:block;width:66px;height:66px;background:url(btn.jpg) 66px 68px;

        position: absolute;left:250px;top:120px; }

    #a2{

        display:block;width:66px;height:66px;background:url(btn.jpg) 135px 68px;position: absolute;left:1050px;top:120px; }

</style>

<body>

<a href="javascript:" id="a1"></a>

<a href="javascript:" id="a2"></a>

<div id="div1">

    <ul>

        <li><img src="1.jpg"  /></li>

        <li><img src="2.jpg"  /></li>

        <li><img src="3.jpg"  /></li>

        <li><img src="4.jpg"  /></li>

    </ul>

</div>

</body>

js代码如下，都带有注释，大家可以自己实现再看代码

<script>

    window.onload=function()

    {

        var oDiv =document.getElementById("div1");

        var oUl =oDiv.getElementsByTagName("ul")[0];

        var aLi=oUl.getElementsByTagName("li");

        oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;  //增加重复的四张图片

        // console.log(oUl.innerHTML);    //调试用的

        oUl.style.width=aLi.length * aLi[0].offsetWidth +"px";  //因为上面加了一半的图片，现在有8张图片。

        // console.log(aLi.length);

        var speed=2;

        function overside()

            {

                if (oUl.offsetLeft<-oUl.offsetWidth/2)   //当ul的一般向左运动，当ul将要进入div时

                {

                    oUl.style.left='0';

                }

                if(oUl.offsetLeft>0)  //当ul等于0，即向右运动馆将要出div的时候

                {

                    oUl.style.left=-oUl.offsetWidth/2+'px';

                }

               oUl.style.left=oUl.offsetLeft+speed+'px';

            }

        var timer=setInterval(overside,30 ) ;

        oDiv.onmouseover=function()

        {

            clearInterval(timer);

        };

        oDiv.onmouseout=function()

        {

            timer=setInterval(overside,30 ) ;

        }

        var oA=document.getElementsByTagName("a");

           oA[0].onclick=function()

        {

             speed=-2;

        }

        oA[1].onclick=function()

        {

            speed=2;

        }

    };

</script>

这有点难度，希望不懂得方法和属性可以百度

js实现图片无缝连接的更多相关文章

  1. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  2. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  3. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  4. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  5. 使用 FocusPoint.js 实现图片的响应式裁剪

    通常网站的布局都不是单一的.例如图像在电脑.平板和智能手机上可能显示的形状是不同的.特别是如果你使用的是全屏图像,在你必须使用相同的图像文件的情况下,你的主题可能会被截断或完全缺失,或者看起来很尴尬. ...

  6. Lazyr.js – 延迟加载图片（Lazy Loading）

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  7. Webview加载本地js、图片的方法

    在项目开发中经常会将比较大的js.图片.css等放到app中,而html放服务器,这样在使用时流量较少,加载也比都放服务器上快,其实方法也比较多,网上搜了很久都没结果. 一种是获取服务器返回的html ...

  8. WebApp：如何让安卓的webview缓存webapp的html、js和图片等资源

    一.开发环境     客户端:安卓+webview(vuejs)     服务器端:tomcat 8.0 二.问题     使用安卓原生+web(基于webpack+vuejs)的方式开发了一个安卓应 ...

  9. lazyload.js实现图片异步载入

    所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...

随机推荐

  1. iOS开发ARC内存管理技术要点

    本文来源于我个人的ARC学习笔记,旨在通过简明扼要的方式总结出iOS开发中ARC(Automatic Reference Counting,自动引用计数)内存管理技术的要点,所以不会涉及全部细节.这篇 ...

  2. Java中抽象类和接口

    抽象类: 为什么要用抽象类? 1.父类的方法好多情况下是没有内容的.例如:USB是一个父类,里面的方法的函数体是可以不写,通过子类可以重写. 2.万一子类没有重写正确,是没有没有提示的.例如:父类中函 ...

  3. mysql 联合索引和唯一索引

    一般来说.如果有where a=? and b=? and c=? 的语句. 如果表也有DML, 我一般只在a 上建索引.  这也是代价平衡的结果. 一方面 只在a 上建索引那么是 index ran ...

  4. JS 中通过对象关联实现『继承』

    JS 中继承其实是种委托,而不是传统面向对象中的复制父类到子类,只是通过原型链将要做的事委托给父类. 下面介绍通过对象关联来实现『继承』的方法: Foo = { // 需要提供一个 init 方法来初 ...

  5. 创建js对象的属性和方法

    按照如下的创建对象的方法,可以节省内存.记录一下方便日后使用 <!Doctype html><html> <head> <title></titl ...

  6. HDU 5964 平行四边形

    假设直线L和L'相交于原点O.假设S ={s1,s2,...,sn}是平面上的n个点.你打 算找四个点满足如下条件:1.   A ∈ L 而 A' ∈ L'.2.   B,B'都属于S;即 B∈S 且 ...

  7. [llvm] Call the LLVM Jit from c program

    stackoverflow: http://stackoverflow.com/questions/1838304/call-the-llvm-jit-from-c-program Another t ...

  8. 安装Linux 16.04 时，选择好分区后，进到选择地点的界面后，总是闪退，退到最原始的界面

    这两天装 Linux 系统,总是遇到一个很蛋疼的问题: 当你累死累活把分区什么的都设置好了之后,在输入了系统名字,开机密码那几项之后,再选择地点的时候(如:选择 "上海"),然后就 ...

  9. AT Tool --- android手机发送at指令

    之前网上也有一款类似的软件,估计是华为内部人员开发的,不过很变态,不但只支持华为的几款手机,而且只能发一条AT命令,然后就不让你发了:所以很气愤,今天花了一天时间自己写了这么款程序,而且是支持所有An ...

  10. CentOS 6、7下pptp vpn一键安装脚本

    之前有折腾过<CentOS 6.7下IPSEC/L2TP VPN一键安装脚本>,不稳定.不支持IOS,因此换成pptp,并已经添加到<lnmp一键安装包>.这个脚本可以单独使用 ...