标签：
相比之下，无缝拼接能避免切换时出现空白，使用户体验更好！
无缝滚动原理：
制作一个双胞胎，内容跟主体内容一致，样式一致，如果横向排列则并排，当切换的时候，就可以弥补主体空白的地方，其他按普通循环操作即可。
源码：
<!DOCTYPE html> <html lang="zn-ch"> <head> <meta charset="UTF-8"> <title>demo</title> <style> .slide-box{margin:0 auto;width:300px;height:100px;overflow:hidden} .slide-box-inner{width:600px;height:100px} .slide-content,.slide-copy{float:left;height:100px} .slide-content a,.slide-copy a{display:block;width:100px;height:100px;text-align:center;line-height:100px;color:#fff;text-decoration:none;float:left} .box1{background:#4A88C6} .box2{background:#EC118E} .box3{background:#1AA3A9} </style> </head> <body> <div class="slide-box" id="slideBox"> <div class="slide-box-inner"> <div class="slide-content" id="slideContent"> <a href="#" class="box1">No1</a><a href="#" class="box2">No2</a><a href="#" class="box3">No3</a> </div> <!-- 双胞胎兄弟 --> <div class="slide-copy" id="slideCopy"> </div> </div> </div> <script type="text/javascript" language="javascript"> //大层 var slideBox = document.getElementById("slideBox"); //内容层 var slideContent = document.getElementById("slideContent"); //拼接层 var slideCopy = document.getElementById("slideCopy"); //循环相隔时间 var speed = 10; //复制内容 slideCopy.innerHTML = slideContent.innerHTML; // *无缝切换函数，滚动值>=可视宽度，归0，否则数值递增 function seamlessSlide() { var seeWidth = slideContent.offsetWidth; if (slideBox.scrollLeft >= seeWidth) { slideBox.scrollLeft = 0; } else { slideBox.scrollLeft++; } } //每10毫秒循环执行slide var runslide = setInterval(seamlessSlide, speed); //鼠标移到大层，循环终止 slideBox.onmouseover = function() { clearInterval(runslide); } // //鼠标移开时，继续循环 slideBox.onmouseout = function() { setTimeout(function() { runslide = setInterval(seamlessSlide, speed); }, 300); } </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/tinyphp/p/4890838.html
