美文网首页
js实现图片的无缝轮播滚动

js实现图片的无缝轮播滚动

作者: 意浅离殇 | 来源:发表于2017-10-15 21:51 被阅读0次

今天学习了一个js实现图片的无缝轮播滚动来和打搅分享一下


大体效果如上图所示:就是4张图片一直在两个按钮之间来回滚动下面介绍一个实现原理。
实现4张图片在两个按钮之间来回滚动假设先向左滚动首先我们通过 oUl.innerHTML+=oUl.innerHTML; 使里面的长度加一倍这样保证能在第四幅图片出来后第一副图片也能接着出来。接下来就是要让他循环显示:这里要用到一个属性:oUl.offsetWidth ul的宽度当第四幅图片刚好滚出屏幕时,此时画面的显示效果和初始状态一模一样,我们让他回到初始状态即可
l-=g_iSpeed; if(l<=-oUl.offsetWidth/2) { l+=oUl.offsetWidth/2; }
l记录滚动长度 当第四幅图片刚好滚出屏幕时 此时l的数值刚好为总长的一半 我们让他加上一般回归到初始状态
向右同理js代码中有不再详细叙述
http://mp.weixin.qq.com/s/EIv2DvRExr0QqUej8hgH7w
css样式:
{padding:0;margin:0;}li{list-style: none}img{border: 0}.roll{width:698px; height:108px; margin:50px auto 0;position: relative; }.btn_left{display: block;width: 68px; height: 68px;background: url(images/btn.jpg) no-repeat -70px -69px;position: absolute; top:20px;left: 1px;z-index: 1;}.btn_left:hover { background: url(images/btn.jpg) no-repeat -70px 0; }.btn_right { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat 1px -69px; position: absolute; top: 20px; right: 0; z-index: 1; }.btn_right:hover { background: url(images/btn.jpg) no-repeat 1px 0; }.roll .wrap{width:546px; height:108px; margin:0 auto; position:relative; overflow: hidden;}.roll ul { position: absolute; top: 0; left: 0; }.roll li { float: left; width: 182px; height: 108px; text-align: center; }.roll li a:hover { position: relative; top: 2px; }.control { border-bottom: 1px solid #ccc; background: #eee; text-align: center; padding: 20px 0; display: none; }
js:
var g_bMoveLeft=true;var g_oTimer=null;var g_iSpeed=3;window.onload=function(){ var oDiv=document.getElementById('roll'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var aA=oDiv.getElementsByTagName('a'); oUl.innerHTML+=oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth
aLi.length+'px'; for (var i = 0; i <aLi.length; i++) { aLi[i].onmouseover=function(){ stopMove(); } aLi[i].onmouseout=function(){ startMove(g_bMoveLeft); } } aA[0].onmouseover=function () { startMove(true); }; aA[1].onmouseover=function () { startMove(false); }; startMove(true);};function startMove(bLeft){ g_bMoveLeft=bLeft; if(g_oTimer) { clearInterval(g_oTimer); } g_oTimer=setInterval(doMove, 30);}function stopMove(){ clearInterval(g_oTimer); g_oTimer=null;}function doMove(){ var oDiv=document.getElementById('roll'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var l=oUl.offsetLeft; if(g_bMoveLeft) { l-=g_iSpeed; if(l<=-oUl.offsetWidth/2) { l+=oUl.offsetWidth/2; } } else { l+=g_iSpeed; if(l>=0) { l-=oUl.offsetWidth/2; } } oUl.style.left=l+'px';}

相关文章

  • js实现图片的无缝轮播滚动

    今天学习了一个js实现图片的无缝轮播滚动来和打搅分享一下

  • 2018-11-10排他思想做轮播图

    这个轮播图没包括无缝滚动 html代码 css代码 js代码

  • JS实现图片的不间断连续滚动

    bug修复版2017.07.11 js替代marquee实现图片无缝滚动可能大家都碰到过,当marquee中滚动的...

  • jQuery 图片无缝滚动

    jQuery实现无缝图片滚动效果

  • 无缝向上、向左滚动--间歇性滚动

    无缝滚动原生JS 版 js 部分 无缝滚动 jquery 版 无缝向左滚动 js 部分 间歇性滚动 与 上面无缝滚...

  • 无缝轮播

    无缝细解过程 html css js 无缝轮播js切换动画 css代码 JS代码 循环无缝轮播 CSS js1.首...

  • 新 js 实现图片的无缝滚动

    题目描述喷水装置(二)时间限制:3000 ms | 内存限制:65535 KB难度:4 描述有一块草坪,横向长...

  • 极简js轮播

    下面是我实现了一个简单的图片轮播图片,本次使用的是js,效果就只有图片在循环滚动 HTML部分: css部分: j...

  • 无缝滚动

    1 概述 无缝滚动效果在网页里特别常见,一般它用来显示一定数量的图片或者与轮播图进行结合,在说无缝滚动实例之前,我...

  • css3实现无缝轮播图片

    实现思路: 需求: 实现三张图片无缝轮播 1: 定义一个父级div , 这个div的宽度为轮播图片元素的宽度 本文...

网友评论

      本文标题:js实现图片的无缝轮播滚动

      本文链接:https://www.haomeiwen.com/subject/cshhuxtx.html