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

下面写一下实现图片自动播放的代码，由于学习的是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. Zookeeper原理架构

    Zookeeper到底是什么!? 学一个东西,不搞明白他是什么东西,哪还有心情学啊!! 首先,Zookeeper是Apache的一个java项目,属于Hadoop系统,扮演管理员的角色. 然后看到官网 ...

  2. unity 4.6.1脚本解析出错，没有激活的勾，方法顺序出错

    检查方法声明上的注释:如/**xx*/或/*xx*/改为//形式 没有激活的勾: 1.如/**xx*/或/*xx*/改为//形式 2.必须保留Start函数

  3. RabbitMQ系列教程之七：RabbitMQ的 C# 客户端 API 的简介（转载）

    RabbitMQ系列教程之七:RabbitMQ的 C# 客户端 API 的简介 今天这篇博文是我翻译的RabbitMQ的最后一篇文章了,介绍一下RabbitMQ的C#开发的接口.好了,言归正传吧. N ...

  4. ORACLE表空间操作实例

    本文主要介绍oracle表空间常见的操作实例,包括创建.查询.增加.删除.修改.表空间和数据文件常用的数据字典和动态性能视图包括v$dbfile.v$datafile.v$tempfile.dba_s ...

  5. 何谓domReady

    我的博客已经写过好几篇如何实现domReady的文章,最近做培训,面向新手们,需要彻彻底底向他们说明这个东西,于是就有了这篇文章. 我们经常看人们用 document.getElementById(& ...

  6. C++ CBitmap,HBitmap,Bitmap区别及联系

    加载一位图,可以使用LoadImage: HANDLE LoadImage(HINSTANCE hinst,LPCTSTR lpszName,UINT uType,int cxDesired,int ...

  7. spring boot 程序打jar包及运行

  8. django中使用mysql数据库的事务

    django中怎么使用mysql数据库的事务   Mysql数据库事务: 在进行后端业务开始操作修改数据库时,可能会涉及到多张表的数据修改,对这些数据的修改应该是一个整体事务,即要么一起成功,要么一起 ...

  9. tensorflow的save和restore

    使用tensorflow中的save和restore可以对模型进行保存和恢复 import tensorflow as tf v1 = tf.Variable(tf.random_normal([1, ...

  10. 上任com的发布流程

    参考:https://blog.csdn.net/qq_19674905/article/details/80268815 首先把本地代码提交到远程自己的git分支,然后merge request到m ...