JQuery picture list horizontal movement

From , 5 Years ago, written in JavaScript, viewed 112 times.
URL https://pastebin.vip/view/05edf455
  1. /*新款上市模块横向滚动*/
  2. $(function () {
  3.     var page = 1;
  4.     var i = 4; //每版放4个图片
  5.     var len = $(".prolist_content ul li").length;
  6.     var page_count = Math.ceil(len / i); //只要不是整数,就往大的方向取最小的整数
  7.     var none_unit_width = $(".prolist").width(); //获取框架内容的宽度,不带单位
  8.     var $parent = $(".prolist_content");
  9.     //向右 按钮
  10.     $(".goRight").click(function () {
  11.         if (!$parent.is(":animated")) {
  12.             if (page == page_count) { //已经到最后一个版面了,如果再向后,必须跳转到第一个版面。
  13.                 $parent.animate({
  14.                     left : 0
  15.                 }, 800); //通过改变left值,跳转到第一个版面
  16.                 page = 1;
  17.             } else {
  18.                 $parent.animate({
  19.                     left : '-=' + none_unit_width
  20.                 }, 800); //通过改变left值,达到每次换一个版面
  21.                 page++;
  22.             }
  23.         }
  24.     });
  25.     //往左 按钮
  26.     $(".goLeft").click(function () {
  27.         if (!$parent.is(":animated")) {
  28.             if (page == 1) { //已经到第一个版面了,如果再向前,必须跳转到最后一个版面。
  29.                 $parent.animate({
  30.                     left : '-=' + none_unit_width * (page_count - 1)
  31.                 }, 800); //通过改变left值,跳转到最后一个版面
  32.                 page = page_count;
  33.             } else {
  34.                 $parent.animate({
  35.                     left : '+=' + none_unit_width
  36.                 }, 800); //通过改变left值,达到每次换一个版面
  37.                 page--;
  38.             }
  39.         }
  40.     });
  41. });
  42.  

Reply to "JQuery picture list horizontal movement"

Here you can reply to the paste above

captcha

https://burned.cc - Burn After Reading Website