另一个无缝滚动轮播，带暂停，由于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. Dynamics CRM2013/2015 禁止欢迎界面（Disable the Welcome Screen）

    首次打开Dynamic CRM  2013会出现一个欢迎界面如下图,要想它不出现勾选图中的复选框就行,OK下回再打开就没有了. 但是当我们打开F12开发人员工具,清除域的缓存后再次打开CRM,这个欢迎 ...

  2. Android群英传笔记——第十章：Android性能优化

    Android群英传笔记--第十章:Android性能优化 随着Android应用增多,功能越来越复杂,布局也越来越丰富了,而这些也成为了阻碍一个应用流畅运行,因此,对复杂的功能进行性能优化是创造高质 ...

  3. OpenCV特征点提取----Fast特征

    1.FAST(featuresfrom accelerated segment test)算法 http://blog.csdn.net/yang_xian521/article/details/74 ...

  4. 《java入门第一季》之面向对象（面向对象案例详解）

    通过几个小案例理重新回顾一下前面所写的内容,对面向对象的理解更加深刻的目的: 案例一: /* 需求: 定义一个员工类,自己分析出几个成员, 然后给出成员变量,构造方法,getXxx()/setXxx( ...

  5. 安装nodejs中遇到的问题

    make clean 出现时间不对的问题的时候,主要是系统时间设置错误. 用date -s 来分别设置日期和时间 用clock -w来写入CMS 安装g++ yum -y install gcc-c+ ...

  6. web报表工具FineReport使用中遇到的常见报错及解决办法（二）

    web报表工具FineReport使用中遇到的常见报错及解决办法(二) 这里写点抛砖引玉,希望大家能把自己整理的问题及解决方法晾出来,Mark一下,利人利己. 出现问题先搜一下文档上有没有,再看看度娘 ...

  7. Oracle ：%TYPE 和 %ROWTYPE

    1. 使用%TYPE 在许多情况下,PL/SQL变量可以用来存储在数据库表中的数据.在这种情况下,变量应该拥有与表列相同的类型.例如,students表的first_name列的类型为VARCHAR2 ...

  8. 一个你不能错过的第三方.net集合库

    今天查找资料的时候,偶然发现了一个第三方的面向.net的集合类库,相比较FCL中的集合类,此第三方集合类库更全,最基本的Set数据结构在FCL里面是没有的,但是这个类库里面有,而且此类库的作者就是&l ...

  9. word search(二维数组中查找单词（匹配字符串）)

    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...

  10. python3 数据科学基础

    第一章 1.Anaconda(最著名的python数据科学平台) 下面小伙伴们咱们来初初识下Anaconda吧 What is Anaconda???? 回答: (1).科学计算的平台 (2).有很多 ...