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

下面写一下实现图片自动播放的代码，由于学习的是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. OWASP安全编码规范快速参考指南

    0x00 原则 概览 开发安全的软件需要对安全原则有基本的了解.虽然对于安全原则的全面评估超出了本指南的范围,但是我们还是提供了一个快速的概览.软件安全的目标是要维护信息资源的 保密性 ,  完整性 ...

  2. centos下同时启动多个tomcat

    1.解压apache-tomcat-7.0.69.tar.gz到/usr/local目录 .tar.gz -C /usr/local 2.新建目录tomcat7_1和tomcat7_2 tomcat7 ...

  3. UGUI的text赋值问题-速度

    仅是简单的给一个ugui.text组件不断的赋值字符串,就会带来很高的CPU消耗,约0.5MS左右. 这个过程主要是消耗在字体的MESH顶点重建. 在游戏中变化的字体一般不多,聊天面板虽然变化,刷新率 ...

  4. C++ 连接Oracle

    下面是一个ADO方式连接Oracle的小程序部分代码...... 首先是Oracle的配置.在Oracle的安装路径下找到:Oracle\network\ADMIN\tnsnames.ora文件.配置 ...

  5. T-SQL行合并成列与列拆分成行

    本文出处:http://www.cnblogs.com/wy123/p/6910468.html 感觉最近sql也没少写,突然有一点生疏了,对于用的不是太频繁的一些操作,时间一久就容易生. 多行的某一 ...

  6. 让Hibernate和触发器协同工作

        Sql Server触发器和hibernate一起使用时经常报类似如下错误 Batch update returned unexpected row count from update [0] ...

  7. Structs复习 OGNL

    Dominmodel只有传 User.age 类似的这种Structs才能帮创建对象 Dominmodel User里必须有空的构造方法 OGNL:OBJECT GRAPHIC NAVAGATION ...

  8. python递归、collections系列以及文件操作进阶

    global log 127.0.0.1 local2 daemon maxconn log 127.0.0.1 local2 info defaults log global mode http t ...

  9. [Android] Robotium手机自动化测试（仅需apk安装包版）——环境搭建 【转】

    Robotium的手机自动化测试,很多都是利用app源代码里的Id定义来开发自动化脚本.而在我开始要为项目中的app写自动化测试脚本的时 候,开发的环境还很不稳定,app也还处于开发的状态中,而且,在 ...

  10. 'Could not find first log file name in binary log index file'的解决办法

    数据库主从出错: Slave_IO_Running: No 一方面原因是因为网络通信的问题也有可能是日志读取错误的问题.以下是日志出错问题的解决方案: Last_IO_Error: Got fatal ...