另一个无缝滚动轮播，带暂停，由于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. Oracle中job的实例

    一.Oracle定时器(Job)各时间段写法汇总 对于DBA来说,数据库Job再熟悉不过了,因为经常要数据库定时的自动执行一些脚本,或做数据库备份,或做数据的提炼,或做数据库的性能优化,包括重建索引等 ...

  2. 学习tornado：介绍

    前言 在python里面,有许多web framework.对于我来说,因为很长一段时间都在使用tornado,所以有了一些心得体会.虽然现在我的工作重点已经转向go了,但是我觉得还是有必要记录一下t ...

  3. TCP/IP滑动窗口

    T C P使用一种窗口(w i n d o w)机制来控制数据流.当一个连接建立时,连接的每一端分配一个缓冲区来保存输入的数据,并将缓冲区的尺寸发送给另一端.当数据到达时,接收方发送确认,其中包含了自 ...

  4. 用boost::bind构造boost::coroutine

    class TestCoro { ... typedef boost::coroutines::coroutione<void ()> Coro; void CoroFun(Coro::c ...

  5. 在 Linux 下用 mkdir 命令来创建目录和子目录

    mkdir 是什么呢 Mkdir 是一个用来在 Linux 系统下创建目录的命令.此命令属于内建命令. 运行 mkdir 命令 你可以在你的控制台直接键入 mkdir 来使用它. $ mkdir 默认 ...

  6. LeetCode之旅（15）-Odd Even Linked List

    题目描述: Given a singly linked list, group all odd nodes together followed by the even nodes. Please no ...

  7. Oracle与Mysql时间格式化

    一,Oracle格式化时间: Oracle 获取当前日期及日期格式 获取系统日期:  SYSDATE()    格式化日期:     TO_CHAR(SYSDATE(),'YY/MM/DD HH24: ...

  8. javascript类和原型学习笔记

    js中类的所有实例对象都从同一个原型对象上继承属性.我们可以自己写一个对象创建的工厂方法来来"模拟"这种继承行为: //inherit()返回一个继承自原型对象p的属性的性对象 / ...

  9. 推荐eclipse插件Properties Editor（转）

    Properties Editor 是一款properties文件编辑器. 需求:一般我们在做“国际化”功能时,我们需要properties中文表示方式用unicode表示.eclipse默认prop ...

  10. MySQL 8 新特性之Invisible Indexes

    背景 索引是把双刃剑,在提升查询速度的同时会减慢DML的操作.毕竟,索引的维护需要一定的成本.所以,对于索引,要加上该加的,删除无用的.前者是加法,后者是减法.但在实际工作中,大家似乎更热衷于前者,而 ...