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].οnclick=function(){speed=-2;}oA[1].οnclick=function(){speed=2;}};
</script>

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

转载于:https://www.cnblogs.com/biyongyao/p/5854799.html

js实现图片无缝连接相关推荐

three.js 背景图片
three.js 背景图片单张图片 const loader1 = new THREE.TextureLoader(); const bgTexture = loader1.load('static ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
js 获取图片url的Blob值并预览
js 获取图片url的Blob值并预览 1)使用 XMLHttpRequest 对象获取图片url的Blob值参考:https://www.cnblogs.com/tujia/p/6483255.h ...
如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载(整理) 一.总结一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
asp.net MVC发布iis无法加载css,js和图片
今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...
原生JS实现图片滚动
2019独角兽企业重金招聘Python工程师标准>>> 原生JS实现图片滚动一.原理黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设 ...
EPUB.js 解决图片裁剪问题(缩放问题)
在EPUB.js中,如果需要实现自动缩放,通过添加smartimages.js就可以实现图片自动缩放了,经过研究smartimages.js,发现,他可以是实现图片的缩放,但只能实现图片比需要显示的空 ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...

js实现图片无缝连接

js实现图片无缝连接相关推荐

最新文章

热门文章