多掌握一种方法总是会有好处的，学习编程就要多思考，举一反三

下面写一下实现图片自动播放的代码，由于学习的是javascript，代码量很大，所以又学习了jquery库的操作，非常简便

还有非常有逼格的三元运算： 条件 ?(表示True) do something :(表示False) do others

这是css代码

* {

    padding:;

    margin:;

}

ul {

    list-style:none;

}

.box {

    width:240px;

    height:180px;

    /*在这里必须要设置高度，因为里面只有一个ul，而我们给ul设置的是绝对定位，提升了层级，那么box文档流中*/

    /*没有元素撑开box的高度，所以我们要给其设置固定高度*/

    background:lightgray;

    margin:200px auto;

    overflow:hidden;

    position:relative;

}

ul {

    width:400%;

    height:180px;

    position:absolute;

    top:;

    left:;

    background:red;

}

ul li {

    float:left;

}

这是html + js代码

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>a website</title>

        <link rel = "stylesheet" href = "css.css" type = "text/css">

    </head>

    <body>

    <div class = "box">

        <ul class = "u">

            <li><img src = "img/01.jpg"></li>

            <li><img src = "img/02.jpg"></li>

            <li><img src = "img/03.jpg"></li>

            <li><img src = "img/04.jpg"></li>

        </ul>

    </div>

    </body>

    <script src = "jquery-3.2.1.js"></script>

    <script type = "text/javascript">

//        想要实现的效果：

//        1.打开网页，图片自动往左移动，当4张图片都移动完之后又重新移动，实现无缝轮播的效果

//        2.当鼠标滑到图片区域图片会停止轮播

//        3.当鼠标滑出图片区域图片会按照原来的位置继续轮播

//        方法一：基于javascript来实现

//        window.onload = function() {

//            var box = document.getElementsByClassName("box")[0];

//            var ul = document.getElementsByTagName("ul")[0];

//            var count = 0;

//            var timer = null;

//            function func(){

//                count--;

//                count < -720 ? count=0 : count;

//                ul.style.left = count + "px";

//            }

//            timer = setInterval(func,20);

//            box.onmouseover = function(){

//                clearInterval(timer)

//            }

//            box.onmouseout = function(){

//                timer = setInterval(func,20);

//            }

//            }

//            方法二：基于jquery实现

            $(function(){

                var count = 0;

                var timer = null;

                function func(){

                    count --;

                    count < -720 ? count = 0

                    :$("ul").css("left",count)

                }

                timer = setInterval(func,20);

                $(".box").mouseover(function(){

                    clearInterval(timer);

                });

                $(".box").mouseout(function(){

                    timer = setInterval(func,20);

                });

            });

//            现在我们加一个按钮控制轮播动画的位置

//            $(".box").before("<button>移动</button>");

//            $("button").click(function(){

//                $(".box").css("margin","20px auto")

//            })

//              或者加一个按钮让轮播位置产生动画效果

//              $(".box").before("<button>移动</button>");

//              $("button").click(function(){

//                  $(".box").toggle(1000)

//              })

    </script>

</html>

js和jquery实现图片无缝轮播的不同写法的更多相关文章

  1. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...

  3. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. jQuery图片无缝轮播插件；

    图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...

  5. 基于jQuery的图片左右轮播，基本原理通用

    毕竟新人,写点基础的小东西,希望能和大家沟通交流,提高自己的水平. 这个是应用较多的轮播部分,希望能和大家分享一下思路,拓宽视野. 话不多说,上内容. 我的思路很简单就是通过判断index值的大小变化 ...

  6. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  7. js、jQuery实现文字上下无缝轮播、滚动效果

    因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...

  8. 记一个jquery 无缝轮播的制作方法

    接触前端也很久了,今天才发现,要做好一个轮播,其实有很多东西需要考虑进去,否则做出来的轮播效果并不好,下面我就来做一个轮播,是依赖jquery来写的 1.要做轮播,首先需要的是HTML的内容,css的 ...

  9. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

随机推荐

  1. [转]USB之Part 4 - Protocol

    原地址http://www.usbmadesimple.co.uk/ums_4.htm Controlling a Device Before we go into detail, we need t ...

  2. Tesseract-OCR4.0版本在VS2015上的编译与运行(转)

    最近刚开始接触识别库引擎方面的知识,由于项目中需要使用光学识别处理模块,在老师与朋友的推荐下,我开始接触tesseract光学识别库,在最开始从GitHub上下载的源代码进行编译的时候,出现了许多意想 ...

  3. C#实现联合体

    [StructLayout(LayoutKind.Explicit, Size = )] public struct TypeTransform { [FieldOffset()] public fl ...

  4. [PHP]PHP缓存机制之Output Control

    ---------------------------------------------------------------------------------------------------- ...

  5. RxJava2.0学习笔记1 2018年3月23日 星期五

    参考博文:给初学者的RxJava2.0教程-简书     源码 :https://github.com/ssseasonnn/RxJava2Demo 1 若是发送多个onError, 则收到第二个on ...

  6. 混合app开发，h5页面调用ios原生APP的接口

    混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...

  7. easyui-datebox 只能获取当前日期以前的日期

    <td> <input id="happenTimes" name="happenTimes" class="easyui-date ...

  8. Java学习01 (第一遍)

    java se - 桌面 java ee - 网页 Jdk :Jre 区别Jdk-开发环境必要Jre-运行环境需要Jdk包含Jre,安装完Jdk就可以了 Javac Demo1.java-Javac ...

  9. Android-Anim-Playground

    Android-Anim-Playground Latest animation ideas I developed to make apps more attractive. Why having ...

  10. 吴裕雄 15-MySQL LIKE 子句

    我们知道在 MySQL 中使用 SQL SELECT 命令来读取数据, 同时我们可以在 SELECT 语句中使用 WHERE 子句来获取指定的记录.WHERE 子句中可以使用等号 = 来设定获取数据的 ...