首页 > 编程语言 >jQuery轮播图(模仿滑动窗口算法)

jQuery轮播图(模仿滑动窗口算法)

时间:2023-04-29 10:23:06浏览次数:38  
标签:jQuery function const 轮播 val len 滑动 pointer left

    const status = [
      "left:0px;",
      "left:10px;",
      "left:20px;",
      "left:30px;",
      "left:40px;",
    ];
    const list = $("#carousel > ul > li");
    const len = list.length;
    let pointer = 0;

    function change(dir) {
      pointer = outRange(dir ? ++pointer : --pointer);
      for (let i = 0, len = status.length; i < len; i++)
        $(list[outRange(pointer + i)]).attr("style", status[i]);
    }

    function outRange(val) {
      return val >= len ? 0 : val < 0 ? len - 1 : val;
    }

    $("#bu1").click(function () {
      change(true);
    });
    $("#bu2").click(function () {
      change(false);
    });

    ```

标签:jQuery,function,const,轮播,val,len,滑动,pointer,left
From: https://www.cnblogs.com/laremehpe/p/17363654.html

相关文章

  • double转为整型intValue()及sha1在线文件获取,文件都有一个唯一的sha1;jQuery事件方法;
    double转为整型intValue()及sha1在线文件获取,文件都有一个唯一的sha1Doubleindust=RankConstant.INIT_RADIO;indust.intValue()double由100.0---->100整型1.intValue()是java.lang.Number类的方法,Number是一个抽象类。Java中所有的数值类都继承它。也就是说,不单是Integer有int......
  • 使用jquery探测移动设备 How to detect mobile devices using jQuery
     Helloeveryone,yesterdayIreceivedarequestfromtheclient.HewantedtodisablethepopupofNewsletterPopupextensionwhencustomersvisithiswebsiteonmobiledevices.ItgavemeachancetoworkwithjQueryagainandfinallyIcameupwitha......
  • jquery:临时禁止鼠标滚动 How to disable scrolling temporarily?
    1.代码://left:37,up:38,right:39,down:40,//spacebar:32,pageup:33,pagedown:34,end:35,home:36varkeys={37:1,38:1,39:1,40:1};functionpreventDefault(e){e=e||window.event;if(e.preventDefault)e.preventDefault()......
  • GMaps.js:让你快速集成 Google Maps 服务的 jQuery 插件
    GMaps.js功能除了添加指定经纬度的标准地图之外,GMaps.js还能定义地图放大的级别,添加标注,获取当前用户的地理位置(HTML5geolocation),定义路线,绘制折线,并且实现这些功能只需要简单的几行代码。另外GMaps.js每个动作都有callback函数让你去集成自定义事件。目前GMaps.js没有详......
  • jquery.liMarqee.js无缝滚动的使用问题
    引入jq、liMarquee.js和liMarquee.css文件<scriptsrc="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><scriptsrc="./js/jquery.liMarquee.js"></script><linkrel="stylesheet&quo......
  • jQuery效果-隐藏与显示
    <!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><scriptsrc="../../Scripts/jquery-3.4.1.min.js"></script><scriptsrc="Index.js"><......
  • jQuery HTML-删除元素
    <!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><scriptsrc="../../Scripts/jquery-3.4.1.min.js"></script><scriptsrc="delete.js">&l......
  • jQuery HTML之添加元素
    <!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><scriptsrc="../Scripts/jquery-3.4.1.min.js"></script><scriptsrc="AddContent.js">&......
  • 一统天下 flutter - widget 列表类: Dismissible - 滑动删除
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget列表类:Dismissible-滑动删除示例如下:lib\widget\list\dismissible.dart/**Dismissible-滑动删除**支持左滑/右滑/上滑/下滑删除,一般在列表中使用,当然也可以不依托列表......
  • 第1章 jQuery入门
    学习要点:1.什么是jQuery2.学习jQuery的条件3.jQuery的版本4.jQuery的功能和优势5.其他JavaScript库6.是否兼容低版本IE7.下载及运行jQuery一.什么是jQueryjQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是JohnResig,于2006年创建的一个开......