function nextPage() {
  
        /*
         克隆第一张图片并添加到box后
         box前移一张图片的距离动画
         动画回调里把box的left值设为0 删除第一张图片
         */
        $(".mypng li:first-child").clone().appendTo($(".mypng"));
        $(".mypng").animate({ left: -width }, { duration: 500, easing: "easeInQuad", complete: function () {
            $(this).css("left", "0");
            $(".mypng li:first-child").remove();
        }
        });
        }

function prePage() {
            $(".mypng li:last-child").clone().prependTo($(".mypng"));
            $(".mypng").css("left", -width);
            $(".mypng").animate({ left: 0 }, { duration: 500, easing: "easeInQuad", complete: function () {
               
                $(".mypng li:last-child").remove();
            }
            });
    }

js跑马灯效果的更多相关文章

  1. Js跑马灯效果 && 在Vue中使用

    DEMO: <!DOCTYPE html><html> <head> <title>滚动播报</title> <meta charse ...

  2. JS实现跑马灯效果(向左,向上)

    <html> <head> <title>JS实现跑马灯效果</title> <style> * { font-size:12px; fon ...

  3. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  4. JS写一个列表跑马灯效果--基于touchslide.js

    先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...

  5. js实现横向跑马灯效果

    首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...

  6. JS实现跑马灯效果(鼠标滑入可暂停,离开继续跑)

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

  7. Vue学习笔记四:跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  8. vue实现跑马灯效果

    vue实现跑马灯效果为阿中哥哥应援 1.效果图 2.实现代码 <!DOCTYPE html> <html lang="en"> <head> & ...

  9. marquee标签实现跑马灯效果--无缝滚动

    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...

随机推荐

  1. checkbox选中问题

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  2. 【待整理】IOS开发之下载

    一.传统的下载文件的方式 - (void)downloaderWithUrl:(NSURL *)url { NSURLRequest *request = [NSURLRequest requestW ...

  3. 使用Qt编写服务器端程序(包括Http传输服务器端)的方法

    使用Qt编写客户端的程序的示例或demo较多,但是编写服务器端程序的demo很少.当然,服务器端的程序一般不需要带界面,这点我们可以理解.不过有些时候我们还是需要使用Qt编写一个简单的测试用的服务器代 ...

  4. SQL Server 2008空间数据应用系列六:基于SQLCRL的空间数据可编程性

    原文:SQL Server 2008空间数据应用系列六:基于SQLCRL的空间数据可编程性 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Server 2008 ...

  5. C语言的本质(38)——makefile之变量

    我们详细看看Makefile中关于变量的语法规则.先看一个简单的例子: foo = $(bar) bar = Huh? all: @echo$(foo) 我们执行make将会打出Huh?.当make读 ...

  6. C语言的本质(35)——共享库

    库用于将相似函数打包在一个单元中.然后这些单元就可为其他开发人员所共享,并因此有了模块化编程这种说法- 即,从模块中构建程序.Linux支持两种类型的库,每一种库都有各自的优缺点.静态库包含在编译时静 ...

  7. Pascal's Triangle II 解答

    Question Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Ret ...

  8. HOWTO Use Python in the web — Python v3.0.1 documentation

    HOWTO Use Python in the web - Python v3.0.1 documentation mod_python¶ People coming from PHP often f ...

  9. IOS添加多个按钮在导航栏

    UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 75.0f, 30.0f)]; UIButton * ...

  10. Java程序员面试题集(1-50)(转)

    转:http://blog.csdn.net/jackfrued/article/details/17339393 下面的内容是对网上原有的Java面试题集及答案进行了全面修订之后给出的负责任的题目和 ...