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. MVC Controller 与 View 传值

    Controller 到 View 1 强类型 控制器 // GET: /Test/ public ActionResult Index() { DateTime date = DateTime.No ...

  2. information_schema.optimizer_trace学习

    information_schema.optimizer_trace 用于追踪优化器的优化过程:通常来说这张表中是没有数据的,要想开户追踪要把 @@session.optimizer_trace='e ...

  3. A Distributed Multichannel MAC Protocol for Multihop Cognitive Radio Networks

    2010 这个呢,就是time slotted的DSA网络MAC层协议. 跟上一篇单纯的Multi Channel实现类似,不过这里是CR网络,因为多了嗅探等操作. 简单的说,time slotted ...

  4. joseph-约瑟夫环问题

    约瑟夫环运作如下: 1.一群人围在一起坐成环状(如:N) 2.从某个编号开始报数(如:K) 3.数到某个数(如:M)的时候,此人出列,下一个人重新报数 4.一直循环,直到所有人出列,约瑟夫环结束 关于 ...

  5. TEA加密

    TEA(Tiny Encryption Algorithm)是一种小型的对称加密解密算法,支持128位密码,与BlowFish一样TEA每次只能加密/解密8字节数据.TEA特点是速度快.效率高,实现也 ...

  6. 扩展ArcGIS API for Silverlight/WPF 中的TextSymbol支持角度标注

    原文 http://blog.csdn.net/esricd/article/details/7587136 在ArcGIS API for Silverlight/WPF中原版的TextSymbol ...

  7. mybatis第一个入门demo

    学习框架技术,一般先写个demo,先知道是什么,然后在知道为什么,这也是进步的一种. 源码链接:http://pan.baidu.com/s/1eQJ2wLG

  8. C#透过PerformanceCounter取得特定Process的CPU使用率

  9. hdu 3954 Level up(线段树)

    题目链接:hdu 3954 Level up 题目大意:N个英雄,M个等级,初始等级为1,给定每一个等级须要的经验值,Q次操作,操作分两种,W l r x:表示l~r之间的英雄每一个人杀了x个怪物:Q ...

  10. Error:Execution failed for task &#39;:app:dexDebug&#39;. &gt; com.android.ide.common.process.ProcessException

    异常Log: Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessE ...