什么是连续滚动幻灯片？打开一些网站的首页，你会发现有一块这样的区域：一张图片，隔一段时间滑动切换下一张；同时，图片两端各有一个小按钮，供你手动点选下一张；底部有一排小圆圈，供你选定特定的某帧图片。这就是“连续滚动幻灯片”（我自己的叫法，当然它也可能叫焦点轮播图，轮播图等等等等），本文单讲手动连续切换，不涉及自动播放和底部小圆圈。

实现这种幻灯片有几个难点：

1.图片放置：你需要把所有图片放入一个div（这里就把它的class叫做pics吧）中，再把pics放入一个更大的div（就命名为container吧）中，然后把container的宽度设为一张图片的宽度，再给它设置overflow:hidden。然后把pics的宽度设置为所有图片的总宽度。这样方便后面从左向右切换。如下图所示：

2.图片轮播。基本要领是，当点击next按钮的时候，将pics容器的left属性定义到下一张图片的位置，从而移动到下一张图片，例如，假设当前是第二张图片，那么点击按钮的时候应该把pics的left值设为-640*2 + 'px'（因为我这里用的图片都是-640px的）（当然这里还要加入一个计数器，当点到最后一张图片的时候，计数器置0）。

如果你不打算加入平滑移动的动画，那到这里就可以结束了。但是如果你打算加入动画，这里就有一个问题：当移动到最后一张图片的时候，继续点击，图片组会由最后一张长途跋涉回滚到第一张，这样用户体验很不好。理想的状态应当是，当你滚动到最后一张继续滚动的时候，应当像之前滚向下一张一样无缝滚动。不知道我说的清不清楚，大致就是：像手机屏幕一样，当你滑动到最后一屏的时候接着滑动，会直接滑回一屏，也就是循环滑动。

本文的主要目的就是说明这种循环滑动的实现方法。

它的基本原理是，你要在正常的图片组的最后面加入一张缓冲图片（src和第一张图片相同），当幻灯片正处于最后一张图片的时候，点击滑动按钮，平滑滑动到这张缓冲图片，当用户下一次点击的时候，再悄悄地把图片置换回真正的第一张图片，然后再执行动画。由于置换回第一张图片的时候是立即执行的，所以用户不会发现图片已经回到了真正的第一张，这就实现了循环滑动。下面请看具体代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无限滚动</title>

    <style type="text/css">

        .main{position:relative;height:360px;width:640px;overflow: hidden;}

        .pics{position:absolute;top:0;left:0;height:360px;width:3200px;}

        .pics img{float:left;height:100%;width:20%;}

    </style>

</head>

<body>

    <!--

    为了行文简单，我这里只添加了一个next按钮，如果你还要添加prev按钮，那应该在

    第一张图片之前也加入一张缓冲图片，src和最后一张图片相同。

    -->

    <div class="main">

        <div class="pics">

            <img class="mainflow" src="img/0.jpg" alt="" />

            <img class="mainflow" src="img/1.jpg" alt="" />

            <img class="mainflow" src="img/2.jpg" alt="" />

            <img class="mainflow" src="img/3.jpg" alt="" />

            <!--↑↑↑真正的最后一张-->

            <img class="mainflow" src="img/0.jpg" alt="" />

            <!--↑↑↑缓冲图-->

        </div>

    </div>

        <div>

            <div class="btn"><button>NEXT</button></div>

        </div>

        <script type="text/javascript">

            var btn = document.getElementsByClassName("btn")[0];

            var pics =  document.getElementsByClassName("pics")[0];

            var mainflow =  document.getElementsByClassName("mainflow");

            var cnt = 0;//计数器

            //主函数

            btn.onclick = function(){

                if(-cnt == mainflow.length - 1){

                    //如果达到最后一张图片，就要特殊处理。

                    //当按下NEXT按钮时，应该先把图片瞬间从缓冲图切换到真正的

                    //第一张，然后再执行动画。

                    pics.style.left = "0px";

                    cnt = 0;

                    //这里我一开始用CSS3自带的transition动画，结果发现它太不好控制了，

                    //挣扎了很久，自己写了动画。

                    animate(pics,(--cnt)*640);

                }else{

                    //一般情况，直接执行切换动画。

                    animate(pics,(--cnt)*640);

                }

            }

            //动画函数开始，target代表要对谁进行滚动，offset代表滚动的距离，

            //也就是一张图片的宽度。

            function animate(target,offset){

                //先用offsetLeft储存好target.style.left，因为后面要用到它，

                //style.left本身只能读取内联样式style="xxxx"里面的样式，如果没有内联样式

                //就直接读取，只会返回空值。

                target.style.left = target.offsetLeft;

                //这里是主要部分

                function go(){

                    //每隔15毫秒，向左移动16个像素。这两个值要多试几次，不然动画会一卡一卡

                    target.style.left = (parseInt(target.style.left) - 16) +"px";

                    timer = setTimeout(go,15);

                    //如果到目的地了就停止滚动

                    if(parseInt(target.style.left) == offset) clearTimeout(timer);

                }

                //别忘了执行一下它。。

                go();

            }

        </script>

</body>

</html>

参考资料：

1.慕课网课程，焦点轮播图特效。http://www.imooc.com/learn/18

JS连续滚动幻灯片：原理与实现的更多相关文章

  1. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

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

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

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

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

  4. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. 用js实现table内容从下到上连续滚动

    网上有很多用ul实现新闻列表滚动的例子,但是很少有直接用table实现列表内容滚动的例子,而Marquee标签滚动的效果不是很好,于是就自己写了一个,提供给攻城师朋友们参考 实现思路:由于table包 ...

  6. Unity3D游戏开发之连续滚动背景

    Unity3D游戏开发之连续滚动背景 原文  http://blog.csdn.net/qinyuanpei/article/details/22983421 在诸如天天跑酷等2D游戏中,因为游戏须要 ...

  7. jquery连续滚动

    本文非常详细的讲解在jquery里实现图片或文字的连续循环滚动的方法. 连续循环滚动是我们在网页开发中经常要用到的特效,在jquery里,我们要实现文字或图片的连续循环滚动是非常简单的.出处:http ...

  8. 第145天：jQuery.touchSlider触屏满屏左右滚动幻灯片

    1.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. jquery 写的图片左右连续滚动

    <style type="text/css"> *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:# ...

随机推荐

  1. P1269 信号放大器

    P1269 信号放大器 给一棵有根树,树的边上有距离.根上有一个信号发射器,会发生强度为 h 的信号,信号会往所有的节点传播,然而每经过一条边强度就会削减距离的大小,当信号到达某点时小于 1,则信号传 ...

  2. [USACO] 打井 Watering Hole

    题目描述 Farmer John has decided to bring water to his N (1 <= N <= 300) pastures which are conven ...

  3. python whl模块安装方法

    搞了半个小时可算是安装上去了 做法 ①先cmd输入Python看一下自己的Python是什么版本的,以及自己的平台,我这里是win32以及python3.6 ②然后去寻找合适的whl,注意cp就是版本 ...

  4. MySQL各种版本的下载方式

    1.在百度上搜“MySQL”,进入官网 原文地址:https://blog.csdn.net/mieleizhi0522/article/details/79109195

  5. L2-006. 树的遍历（不建树）

    L2-006. 树的遍历   给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(<=30),是二叉树中结点 ...

  6. 关于 startup_stm32f10x_hd.s 这个文件的一些说明

    关于 startup_stm32f10x_hd.s 这个文件的一些说明 startup_stm32f10x_hd.s 是一个启动文件,里面是使用汇编语言写好的基本程序,当STM32 芯片上电启动的时候 ...

  7. 【Codeforces 300C】Beautiful Numbers

    [链接] 我是链接,点我呀:) [题意] 让你找到长度为n的数字 这个数字只由a或者b组成 且这n个数码的和也是由a或者b组成的 求出满足这样要求的数字的个数 [题解] 枚举答案数字中b的个数为y,那 ...

  8. noip模拟赛 第K小数

    [问题描述]有两个正整数数列,元素个数分别为N和M.从两个数列中分别任取一个数相乘,这样一共可以得到N*M个数,询问这N*M个数中第K小数是多少.[输入格式]输入文件名为number.in.输入文件包 ...

  9. docker: 解决centos7下cgroup.procs: no such device的错误

    在centos7下,运行docker run的时候会发生cgroup.procs: no such device的错误,解决方法是编辑 /lib/systemd/system/docker.servi ...

  10. Neutron中的网络I/O虚拟化

    为了提升网络I/O性能.虚拟化的网络I/O模型也在不断的演化: 1,全虚拟化网卡(emulation).如VMware中的E1000用来仿真intel 82545千兆网卡,它的功能更完备,如相比一些半 ...