另一个无缝滚动轮播，带暂停，由于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. Android开发艺术探索——新的征程，程序人生路漫漫！

    Android开发艺术探索--新的征程,程序人生路漫漫! 偶尔写点东西分享,但是我还是比较喜欢写笔记,看书,群英传看完了,是学到了点东西,开始看这本更加深入Android的书籍了,不知道适不适合自己, ...

  2. 【一天一道LeetCode】#18. 4Sum

    一天一道LeetCode (一)题目 Given an array S of n integers, are there elements a, b, c, and d in S such that ...

  3. 《java入门第一季》之面向对象（构造方法）

    /* 构造方法: 给对象的数据进行初始化 格式: A:方法名与类名相同 B:没有返回值类型,连void都没有 C:没有具体的返回值 */ class Student { private String ...

  4. 《java入门第一季》二维数组三个案例详解

    案例一:遍历二维数组 /* 需求:二维数组遍历 外循环控制的是二维数组的长度,其实就是一维数组的个数行数. 内循环控制的是一维数组的长度,每一行,一维数组元素分别的个数. */ class Array ...

  5. Oracle EBS 重新编译无效对象 invalid object

    1.  查看数据库中的无效对象      check oracle object      SQL> select count(*) from dba_objects where status= ...

  6. 关于SMALI语法

    dalvik字节码有两种类型,原始类型和引用类型.对象和数组是引用类型,其它都是原始类型.V  void,只能用于返回值类型Z  booleanB  byteS  shortC  charI  int ...

  7. MTK6577+Android之Camera驱动

    MTK6577+Android之Camera驱动 <MTK安卓平台的Camera效果在线调试> 1.     Camera拍照相关概念 1.1  ISP isp--(Image Signa ...

  8. java finalize方法总结、GC执行finalize的过程

    注:本文的目的并不是鼓励使用finalize方法,而是大致理清其作用.问题以及GC执行finalize的过程. 1. finalize的作用 finalize()是Object的protected方法 ...

  9. linux系统安装mysql数据库

    1.首先关闭linux的防火墙,执行命令 chkconfig iptables off 2.从mysql官网上下载自己适合的mysql版本https://dev.mysql.com/downloads ...

  10. Axis创建webservice客户端和服务端

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本人声明.否则将追究法律责任. 作者:永恒の_☆ 地址:http://blog.csdn.net/chenghui0317/ ...