另一个无缝滚动轮播，带暂停，由于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. mysql进阶(二)索引简易教程

    Mysql索引简易教程 基本概念 索引是指把你设置为索引的字段A的内容储存在一个独立区间S里,里面只有这个字段的内容.在找查这个与这个字段A的内容时会直接从这个独立区间里查找,而不是去到数据表里查找. ...

  2. 重构前VS重构后效果对比

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42554641 学习重构已经一个多月了,虽然不能让代码特别的 ...

  3. VectorDrawable与AnimatedVectorDrawable

    VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图.先来一个例子吧. <?xml version=&qu ...

  4. SpriteBuilder修改CCB文件中的子CCB文件需要注意的一个地方

    在SpriteBuilder中如果一个CCB(比如一个场景)中嵌入了另一个子CCB文件(比如一个player),那么当给该子CCB中的root对象添加若干属性的时候,必须注意到这个并没有应用到父CCB ...

  5. 升级CentOS5.6_X64 python2.4.3到2.7

    本文转自:http://hxl2009.blog.51cto.com/779549/1031310 升级CentOS 5.6 64位版python到2.7.31. 背景CentOS 5.6自带的Pyt ...

  6. Xcode自定义字体不能应用的原因

    想给UILabel换一个自定义的字体,从字体册选择兰亭黑: 然后选择 在Finder中显示,找到字体文件为Lantinghei.ttc: 将其拷贝到项目中,在info.plist里添加字体支持key, ...

  7. CAS实现单点登录--错误记录

    遇到的错误: 生成证书: 1.   命令:keytool -genkey -alias  smalllove -keyalg RSA -keystore C:/keys/smallkey  错误:ja ...

  8. 在GitHub上创建代码仓库

    目前在GitHub上管理托管带代码的人越来越多了,今天也尝试了一次,顺便记下来,备用. 首先是在GitHub上创建一个代码仓库,创建完之后,GitHub上会有提示,这时进入项目目录执行下面的命令,顺便 ...

  9. masm的一些常用编译选项

    ml命令行选项: /Dsymbol[=value] 定义给定名称的文本宏 /Fl 生成lst文件 /Sn lst文件中关闭符号表 /I 设置include文件的路径 /link 发送给link的连接器 ...

  10. rails应用ajax之三:进一步完善ajax动画特效果

    本猫已经对界面放低标准很久了,但是复习了ajax之后突然发现:哇!原来世界可以这么美,这么生动鲜活的!所以本篇主要讨论下如何用ajax在rails中做一些简单的动画效果. 其实最新版的的rails中使 ...