另一个无缝滚动轮播，带暂停，由于js是异步，用C面向过程的思想开始会很怪异很怪异，因为当你定时器里面需要执行的函数时间比较长或是有一段延时时，异步的代码会完全不同，但习惯就好了。

　　这个代码有几个问题，后续会优化：

　　1、由于css定位margin的问题，并非几张轮播的图片移动的距离一致，故而你会看到两个很冗余的if代码，那个判断都固定死了

　　2、这种定时器嵌套理解起来比较容易，但有一个较大的问题是：当执行到setTimeout时，你会发现鼠标移入移出暂停轮播的效果失效，因为这是程序执行的是一段空的延时，才会出现这样

　　3、要实现带暂停的轮播，上面有这两个缺陷，用户体验会有一丢丢不perfect，当然有更好更高级的方式实现，这里就当做自己刚入门的一段回忆好了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js-text</title>

    <style>

        html,body,div,ul,li{margin:0;padding:0}

        .div11{width:895px;height:165px;margin:300px auto 0;position:relative;border-radius:10px;

        overflow:hidden}

        #div1 ul{position:absolute;left:0;top:0;}

        #div1 ul li{width:220px;height:165px;float:left;list-style:none;margin:0 2px;}

        #div1 ul img{width:220px;height:165px;border-radius:10px;}

        /*#div1 img{width:33px;height:33px;}*/

        .cDirection {width:955px;height:30px;margin:0 auto;}

        .cDirection img{width:30px;height:30px;}

        .cDirection .right{float:right}

        body{background:url("images/background2.jpg")}

    </style>

    <script>

        window.onload=function (){

            var oDiv1=document.getElementById('div1');

            var oDiv2=document.getElementById('direction');

            var oUl=oDiv1.getElementsByTagName('ul')[0];

            var oLi=oDiv1.getElementsByTagName('li');

            var oA=oDiv2.getElementsByTagName('a');

            var nSpeed=2;

            var time;

            var flag=0;

            oUl.style.width=(oLi[0].offsetWidth+4)*oLi.length+'px';

            function move(){

                    if(oUl.offsetLeft<-oUl.offsetWidth/2){

                        oUl.style.left='0';

                    }

                    if(oUl.offsetLeft>0){

                        oUl.style.left=-oUl.offsetWidth/2+'px';

                    }

                    oUl.style.left=oUl.offsetLeft+nSpeed+'px';

//                    console.log(oUl.offsetLeft);

            }

            var lunBo=function(){

                clearInterval(time);

                time=setInterval(function(){

                    move();

//                    if((oUl.offsetLeft)%(oLi[0].offsetWidth+nSpeed)==0&&oUl.offsetLeft!=-888)

                    if((oUl.offsetLeft==-670||oUl.offsetLeft==-446||oUl.offsetLeft==-222||oUl.offsetLeft==0)&&nSpeed==2)

                    {

                        clearInterval(time);

                        setTimeout(function(){

                            lunBo();

                        },1000);

                    }

                    if((oUl.offsetLeft==-670||oUl.offsetLeft==-446||oUl.offsetLeft==-222||oUl.offsetLeft==-894)&&nSpeed==-2)

                    {

                        clearInterval(time);

                        setTimeout(function(){

                            lunBo();

                        },1000);

                    }

                },10);

            };

//            var newLunBo=new lunBo();

            lunBo();

            oDiv1.onmouseover=function (){clearInterval(time)};

            oDiv1.onmouseout=function (){lunBo()};

            oA[0].onmouseover=function (){nSpeed=-2};

            oA[1].onmouseover=function (){nSpeed=2};

        };

    </script>

</head>

<body>

<div class="div11" id="div1">

    <ul>

        <li><a href="javascript:"><img src="data:images/picture1.png" alt="1"></a></li>

        <li><a href="javascript:"><img src="data:images/picture2.png" alt="2"></a></li>

        <li><a href="javascript:"><img src="data:images/picture3.png" alt="3"></a></li>

        <li><a href="javascript:"><img src="data:images/picture4.png" alt="4"></a></li>

        <li><a href="javascript:"><img src="data:images/picture1.png" alt="1"></a></li>

        <li><a href="javascript:"><img src="data:images/picture2.png" alt="2"></a></li>

        <li><a href="javascript:"><img src="data:images/picture3.png" alt="3"></a></li>

        <li><a href="javascript:"><img src="data:images/picture4.png" alt="4"></a></li>

    </ul>

</div>

<div class="cDirection" id="direction">

    <a href="javascript:"><img src="data:images/left1.png" alt=""></a>

    <a class="right" href="javascript:"><img src="data:images/right1.png" alt=""></a>

</div>

</body>

</html>

3、js无缝滚动轮播的更多相关文章

  1. jQuery仿淘宝图片无缝滚动轮播

    自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...

  2. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  3. JS实现文字向上无缝滚动轮播

    效果图: 全部代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  4. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  5. 原生JS简单的无缝自动轮播

    最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...

  6. JS实现自动轮播图效果（js案例）

    现在很多网站都有轮播图,这篇文章主要为大家详细介绍了js实现轮播图的完整代码及原理,需要的小伙伴可以参考一下. 1.轮播图主要功能: 1.  图片自动轮播(主图切换同时下面导航图片也会跟着变化) 2. ...

  7. JQuery 滚动轮播

    css: *{margin: 0;padding: 0;}body{font-size: 12px;line-height: 24px;text-algin: center; }a{color: #f ...

  8. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  9. 原生js手动轮播图

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...

随机推荐

  1. 【Python】Talk Python To Me Podcast播客

    这是Python相关的一个播客,通过播客的形式给大家讲述python那点事,相关的链接都会列出来,有一些是由文本内容的,如果听不太懂就看看英文原文.不fanqiang的情况下,网页打开没有问题,但是播 ...

  2. Android存储系统的架构与设计

    一.概述 本文讲述Android存储系统的架构与设计,基于Android 6.0的源码,涉及到最为核心的便是MountService和Vold这两个模块以及之间的交互.为了缩减篇幅,只展示部分核心代码 ...

  3. 【一天一道LeetCode】#31. Next Permutation

    一天一道LeetCode系列 (一)题目 Implement next permutation, which rearranges numbers into the lexicographically ...

  4. Linux 用户打开进程数的调整

    Linux 用户打开进程数的调整 参考文章: 关于RHEL6中ulimit的nproc限制(http://www.cnblogs.com/kumulinux/archive/2012/12/16/28 ...

  5. 修改Tomcat访问的端口号

    修改Tomcat端口号步骤: 1.找到Tomcat目录下的conf文件夹 2.进入conf文件夹里面找到server.xml文件 3.打开server.xml文件 4.在server.xml文件里面找 ...

  6. Media Player Classic - HC 源代码分析 2：核心类 （CMainFrame）（1）

    ===================================================== Media Player Classic - HC 源代码分析系列文章列表: Media P ...

  7. sqlserver2008中删除了windows用户，导致无法登陆的解决方案

    打开管理工具中的"服务",找到并关闭SQL Server服务.进入命令进入SQL Server 2008的安装目录,找到sqlservr.exe文件,执行命令:sqlservr - ...

  8. Unity与web交互

    Unity在发布web时,重要的是Unity与Web的交互,参数的传递 1.unity调用网页js的函数:Application.ExternalCall js函数: <script langu ...

  9. 属性动画基础之ValueAnimator

    概述 属性动画是谷歌在android3.0(API level 11)时候给我们带来了属性动画,真正意义上带来了"动画",以前的帧动画也就4中效果的组合(旋转.淡入淡出.放大缩小. ...

  10. 如何oracle调试存储过程

    1．打开PL/SQL Developer 如果在机器上安装了PL/SQL Developer的话,打开PL/SQL Developer界面 输入用户名,密码和host名字,这个跟在程序中web.con ...