js实现图片无缝连接

时间:2022-11-07 12:58:37

效果图

js实现图片无缝连接

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&period;NET MVC中使用Dropzone&period;js实现图片的批量拖拽上传

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

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

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

  6. Lazyr&period;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&period;js实现图片异步载入

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

随机推荐

  1. Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次

    [请尊重原创版权,如需引用,请注明来源及地址] > 字符串拼接一般使用“+”,但是“+”不能满足大批量数据的处理,Java中有以下五种方法处理字符串拼接,各有优缺点,程序开发应选择合适的方法实现 ...

  2. 负margin在布局中的运用(&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;&ast;)

    一.左右栏宽度固定,中间栏宽度自适应 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  3. jQuery提供的小方法

    jQuery提供的小方法: 1.选择器 + 事件 + 函数 = 复杂的交互 2.循环处理与选择器匹配的各个元素:each() $("#").each(function(){     ...

  4. Mac上小巧实用的GIF格式录屏软件 LICEcap

    LICEcap 是一款小巧使用的Mac屏幕录制软件,它以GIF格式来录制屏幕内容,用户可以自定帧率和录制范围.这样就能控制生成文件的大小,非常便捷实用哦.点击进入下载 <ignore_js_op ...

  5. PHP安装插件方式

    PHP安装插件方法主要有两种: 1.先安装相关的库,zlib.curl.xml等,然后在安装 php 时的 ./configure 中设置 --with-xxx(你需要的插件),三部曲安装即可. 2. ...

  6. 使用clone

    1.继承Cloneable接口 2.重写clone方法 3.在clone方法中调用super.clone() 4.把浅复制的引用指向原型对象新的克隆体

  7. Spring Boot 事件和监听

    Application Events and Listeners 1.自定义事件和监听 1.1.定义事件 package com.cjs.boot.event; import lombok.Data; ...

  8. How to Change Error Message Colors in Windows 10 PowerShell Console

    While this was a really easy way to change some of the settings, what if you want to do more extensi ...

  9. Tomcat架构解析&lpar;四&rpar;-----Coyote、HTTP、AJP、HTTP2等协议

    Connector是Tomcat中非常重要的一个组成部分,说白了,就是如何从客户端获取到相应的请求信息.这部分主要包括的难点有这样几个部分: 1.客户端与服务端的协议 客户端与服务端的协议是多种多样的 ...

  10. NetCat教程

    NetCat by Jian Lee 简介 使用 隐藏命令行参数 正/反向域名解析 参数详解 案例 监听端口(制作蜜罐) 端口扫描 ftp 服务器 两台服务器文件校验 使用注意 简介 使用 最简单的使 ...