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. Android自学学习资料

    最近在自学Android编程,在网上看了一些博客和视频教程,觉得比较好的分享一下,继续学习,gangbade~ 国外android官网总是出现连不上的情况,如果你不想FQ的话,这里github上可以直 ...

  2. Google谷歌搜索引擎登录网站 - Blog透视镜

    建置好了网站之后,为了能提升流量或是增加曝光度,Mix通常会到Google谷歌,用手动登录的方式,登录网站,不久之后,搜索引擎就会派遣蜘蛛机器人,来检索你的网站,等一段时间之后,就会出现在搜索引擎内, ...

  3. WPF笔记(2.3 StackPanel)——Layout

    原文:WPF笔记(2.3 StackPanel)--Layout StackPanel用于小规模的排版布局,比如说一个局部下几个textbox和Button啦.Orientation属性有Vertic ...

  4. 软件体系结构经典问题——KWIC的分析和解决

    KWIC作为一个早年间在ACM的Paper提出的一个问题,被全世界各个大学的软件设计课程奉为课堂讲义或者作业的经典.(From Wiki,FYI,D. L. Parnas uses a KWIC In ...

  5. N-Queens II 解答

    Question Follow up for N-Queens problem. Now, instead outputting board configurations, return the to ...

  6. Unity 扩展属性自定义绘制

    这么晚了准备睡觉的时候,去学习了一会. 发现一个标题好奇的点进去. 居然是自定义绘制属性.  在前几天这个问题把我难住了,没想到几分钟就能解决的问题. 我花了半天时间使用反射去解决...  如果我们想 ...

  7. linux 在批处理中,完整路径有空格的处理方式(加引號)

    cp -f E:/XML_EDITOR/xmleditor25/xmleditor/Editor_UIOuterCtrl/TraceViewDlg.cpp E:/XML_EDITOR/'XMLEdit ...

  8. ios8加入通知栏开始

    ios8加入通知栏开始 by 吴雪莹 以打开vpn设置为例: @IBAction func open(sender: AnyObject) { let context = self.extension ...

  9. 【高精度+DP】【HDU1223】 OrderCount

    Order Count Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  10. httpwatch 9.3怎么在ie 8上看不到

    首先,确认HttpWatch Basic加载项是否启动:打开IE,单击工具图标并选择管理加载项.确认HttpWatch Basic的状态是已启用,点击关闭.之后打开某个网页,在页面空白处右击选择Htt ...