相比之下，无缝拼接能避免切换时出现空白，使用户体验更好！

无缝滚动原理：

制作一个双胞胎，内容跟主体内容一致，样式一致，如果横向排列则并排，当切换的时候，就可以弥补主体空白的地方，其他按普通循环操作即可。

源码：

<!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>

javascript无缝滚动原理的更多相关文章

  1. JavaScript实现无缝滚动 原理详细讲解

    先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...

  2. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  3. javascript无缝滚动示例

    效果 图片大小均为200*200; 默认向左循环滚动; 鼠标悬浮暂停,鼠标移走继续滚动; 可以在此基础进行扩展. 下面是代码: <!doctype html> <html lang= ...

  4. JavaScript无缝滚动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 利用scrollTop 制作图片无缝滚动

    <!doctype html><title>javascript无缝滚动 by 司徒正美</title><meta charset="utf-8&q ...

  6. JS运动 - 无缝滚动和缓动动画

    JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...

  7. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  8. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  9. Javascript学习之无缝滚动

    无缝滚动Javascript: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

随机推荐

  1. MFC+WinPcap编写一个嗅探器之零（目录）

    零零散散写了三天,完成了编写嗅探器的文章,旨在让自己加深印象,是初学者少走一些弯路.因为先前未接触MFC,之后也不打算精通,完全是0基础,所以文章技术含量不高,但难点基本上都都包括了,凑合这看吧,接下 ...

  2. 【Java】if判断boolean类型

    public class Test { public static void main(String[] args) { boolean i=false; boolean j=true; if(i=j ...

  3. Mybatis源码分析之参数处理

    Mybatis对参数的处理是值得推敲的,不然在使用的过程中对发生的一系列错误直接懵逼了. 以前遇到参数绑定相关的错误我就是直接给加@param注解,也稀里糊涂地解决了,但是后来遇到了一些问题推翻了我的 ...

  4. 深度学习基础系列（二）| 常见的Top-1和Top-5有什么区别？

    在深度学习过程中,会经常看见各成熟网络模型在ImageNet上的Top-1准确率和Top-5准确率的介绍,如下图所示: 那Top-1 Accuracy和Top-5 Accuracy是指什么呢?区别在哪 ...

  5. oracle 查询数据库中 有数据的表

    select table_name from ALL_TABLES where TABLESPACE_NAME='xxx' and NUM_ROWS > 0 order by  table_na ...

  6. centos7-硬盘坏道检测

    #检测坏道命令,结果输出到 /home/badblocks.log badblock -s -v -o /home/badblocks.log /dev/sdb1 [注]:硬盘损坏程度不同,block ...

  7. bound和unbound方法，类的绑定和非绑定是什么

    作者:灵剑链接:https://www.zhihu.com/question/41006598/answer/148994582来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. POJ3450 Corporate Identity

    后缀数组. 解决多个字符串的最长公共子串. 采用对长度的二分,将子串按height分组,每次判断是否在每个字符串中都出现过. 复杂度O(NlogN) By:大奕哥 #include<cstrin ...

  9. UVA11468 Substring --- AC自动机 + 概率DP

    UVA11468 Substring 题目描述: 给定一些子串T1...Tn 每次随机选择一个字符(概率会给出) 构造一个长为n的串S,求T1...Tn不是S的子串的概率 直接把T1...Tn建成AC ...

  10. BZOJ 1395 [Baltic2005]Trip（最短路+DP）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1354 [题目大意] 给出一些车的班次,包括起点,终点,到达起点时间区间, 到达终点时间 ...