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

下面写一下实现图片自动播放的代码，由于学习的是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. sql server 查看对象最后修改时间

    sql server 查看对象最后修改时间,根据最后修改时间排序 存储过程 SELECT * FROM sys.all_objects WHERE  TYPE='P' ORDER BY modify_ ...

  2. UI5-学习篇-1-Eclipse开发工具及环境搭建

    最近研究SAP-UI5好几个月了,将相关学习经历及问题点做个记录. 1.先了解学习资料相关站点 SAP官网:https://www.sap.com/china/index.html SAP开发工具:h ...

  3. list集合转换成datatable

    /// 将list集合转换成datatable /// </summary> /// <param name="list"></param> / ...

  4. 【Noip模拟 20161004】局域网

    问题描述 所有SZSZ 学生翘首以盼的新教学楼总算快要竣工了,接下来到了网络布线的时候.网络系统的总布局是由nn台计算机组成的有线局域网,每根网线长度为dd,正常情况下,网线是可以缠绕使其变短但是不能 ...

  5. js 提示框的实现---组件开发之（二）

    接着第上一个,在js文件里再增加一个 popModal 模块,实现弹框效果 css 代码: .alert { padding: 15px; margin-bottom: 20px; border: 1 ...

  6. C语言复习：指针知识

    指针知识体系搭建 指针强化 指针是一种数据类型 指针也是一种变量,占有内存空间,用来保存内存地址 测试指针变量占有内存空间大小:sizeof(指针名); 2)*p操作内存 在指针声明时,*号表示所声明 ...

  7. Linux学习笔记--vim

    Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用. vim的三种模式 命令模式(Command mode),输入模式(Insert m ...

  8. Notepad++好用的功能和插件

    Notepad++是一款Windows环境下免费开源的代码编辑器,支持Python,shell,Java等主流语言编写.本文主要描述Notepad++一些好用但是容易忽视的功能. 1.根据文件内容查找 ...

  9. kickstart自动安装部署RHEL7

    Kickstart是一种无人值守的安装方式.它的工作原理是在安装过程中记录典型的需要人工干预填写的各种参数,并生成一个 名为ks.cfg的文件.如果在安装过程中(不只局限于生成Kickstart安装文 ...

  10. 11.枚举类.md

    目录 1.定义: 2.枚举类和普通类的区别: 2.1枚举类的简单构建: 2.2枚举类的成员变量.方法和构造 2.3实现接口的枚举类 1.定义: 2.枚举类和普通类的区别: 枚举类的默认修饰符是 pub ...