效果图

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开发常见错误解决方法

    1.出现下面的错误: StoryboardApp[8593:207] Failed to instantiate the default view controller for UIMainStory ...

  2. code forces 383 Arpa's loud Owf and Mehrdad's evil plan(有向图最小环)

    Arpa's loud Owf and Mehrdad's evil plan time limit per test 1 second memory limit per test 256 megab ...

  3. HDU-2296 Ring(AC自动机+DP)

    题目大意:给出的m个字符串都有一个权值.用小写字母构造一个长度不超过n的字符串S,如果S包含子串s,则S获取s的权值.输出具有最大权值的最小字符串S. 题目分析:先建立AC自动机.定义状态dp(ste ...

  4. 【我是老中医】Win10系统下MATLAB无法正常打开的解决方案

    转眼大四了,要开始做毕设了,导师给的题目要用到他之前做的东西,都是MATLAB做的,所以不太熟悉MATLAB的我也得用这玩意儿了,想想自己目前也就大二的DSS实验和大三的AI实验用过MATLAB,当时 ...

  5. io.sort.spill.percent调整

    引言 MapReduce作出保证:进入每个Reducer的数据行都是有序的(根据数据行的键值进行排序).MapReduce将Mapper的输出进行排序并传递给Reducer作为输入的过程称为Shuff ...

  6. How To: Samba4 AD PDC + Windows XP, Vista and 7

    dnsmasq If you've been struggling with Samba3 domain controllers and NT4 style domains working with ...

  7. oracle恢复误删除数据

    --开启行移动功能alter table 表名 enable row movement;--恢复表数据flashback table 表名 to timestamp to_timestamp('201 ...

  8. Hadoop Pipeline详解[摘抄]

    最近使用公司内部的一个框架写map  reduce发现没有封装hadoop streaming这些东西,查了下pipeline相关的东西 Hadoop Pipeline详解 20. Aug / had ...

  9. winform上控件太多，绘制时会逐个出现，通常说双缓冲能解决但实际不能解决的问题的解决方法。

    protected override CreateParams CreateParams { get { CreateParams cp = base.CreateParams; cp.ExStyle ...

  10. [ZZ] Equal Error Rate （EER）

    这篇博客很全面 http://www.cnblogs.com/cdeng/p/3471527.html ROC曲线 1.混淆矩阵(confusion matrix) 针对预测值和真实值之间的关系,我们 ...