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. service2008 word 导入导出 配置问题

    除了配置 com组件权限 64位系统还要加 下面的文件 C:\Windows\SysWOW64\config\systemprofile\Desktop C:\Windows\Temp 也要加权限

  2. mysql 针对单张表的备份与还原

    A.MySQL 备份工具xtrabackup 的安装 . percona 官方xtrabackup 的二进制版本:二进制版本解压就能用了. . 解压xtrabackup & 创建连接 -Lin ...

  3. INSERTION_SORT插入排序C++实现

    大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 以下用C++实现插入排序的升序和降序排序 算法来自<算法导论> #include< ...

  4. NOI十连测 第四测 T3

    思路: 算法一:可以n^2找出每个点的权值,然后n^2做完,预计得分10 算法二:随机找点然后每次找最高..貌似只有10分?然而考试的时候煞笔了,边界设成inf.. 算法三:随机找几个点,然后随机爬山 ...

  5. HttpApplication中的异步线程

    一.Asp.net中的线程池设置 在Asp.net的服务处理中,每当服务器收到一个请求,HttpRuntime将从HttpApplication池中获取一个HttpApplication对象处理此请求 ...

  6. ListView与CheckBox组合实现单选

    main.xml配置文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  7. HTML5学习摘录

    设计原理 不是规范里都包含什么,而是规范里为什么会包含它们,以及在设计这个规范的时候,设计者们是怎么看待这些东西的. 发展史:HTML2.0——>HTML3.2——>HTML4.0.1—— ...

  8. 一个web初学者的笔记总结

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px ...

  9. Error Correct System(模拟)

     Error Correct System Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I ...

  10. Yeslab现任明教教主数据中心Nexus课程 视频教程 下载

    Yeslab现任明教教主数据中心Nexus课程 视频下载 视频教程下载目录: Yeslab现任明教教主数据中心Nexus课程第1部分.rar Yeslab现任明教教主数据中心Nexus课程第2部分.p ...