jQuery.ScrollTo/jQuery.SerialScroll水平滚动 [英] jQuery.ScrollTo / jQuery.SerialScroll Horizontal Scrolling

问题描述

我希望使用 jQuery.SerialScroll (基于在 jQuery.ScrollTo )上.

I am looking to implement horizontal scrolling using jQuery.SerialScroll (based on jQuery.ScrollTo).

正如我在但是，现在我需要离散滚动，并且SerialScroll可以完美地用于垂直滚动.

However, now I need discrete scrolling and I have SerialScroll working perfectly for vertical scrolling.

由于某种原因，如果将'axis'属性指定为'x'，则不会发生任何事情.

For some reason, if the 'axis' property is specified as 'x' nothing happens.

我什至无法获得从右到左的SererScroll示例滚动即可正常工作.

I can't even get the SerialScroll example for right to left scrolling to work.

我有这样的HTML:

<div id="pane">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
</div>

我有这样的jQuery，当轴为"y"时可以使用

I have jQuery like this, that works when axis is 'y'

 jQuery(function($) {
      var $pane = $('#pane');
      $pane.serialScroll({
          items: 'div',
          next: $pane, // the container itself will get bound
          duration: 2100,
          force: true,
          axis: 'x',
          step: 1, //scroll 1 news each time
          event: 'showNext' //just a random event name
       });

       setInterval(function() {//scroll each 12 seconds
          $pane.trigger('showNext');
       }, 12000);
   });

有什么想法吗?

//编辑(接受答案)

对于那些随之而来的人，接受的答案摆脱了对"serialScroll"的需要(只是需要scrollTo).不需要高度.确保将$('scroller')更改为$('mywrap')或$(target.parent().parent())之类的内容.您还可以像这样设置自动滚动:

For those that come along, the accepted answer gets rid of the need for "serialScroll" (just need scrollTo). Heights weren't required. Be sure to change $('scroller') to something like $('mywrap') or $(target.parent().parent()). You can also set up automatic scrolling like this:

 var index = 2;

 setInterval(function() {//scroll each 5 seconds
 index = index > $('#news ul li').length ? 1 : index;
  sliderScroll($('#news ul li:nth-child(' + index + ')'));
  index ++;
 }, 5000);

将#news ul li替换为适当的选择器.

replacing #news ul li to your appropriate selector.

推荐答案

我最近正在使用scrollTo来实现类似Coda的滑块向导.

I was recently working with scrollTo to implement a Coda-like slider wizard.

这是我采取的步骤:

1. 将包含div设置为我希望滑块显示为的尺寸.溢出:自动;有助于测试，但您最终可能要使用overflow:hidden.
2. 在该地方放置另一个div，使其足够大，可以水平放置所有元素.
3. 浮动面板.给他们明确的尺寸.

我的CSS:

.scroller{
  position: relative;
  overflow: hidden;
  height: 410px;
  width: 787px;}
  .modal-content{width: 3400px;}
    .modal-content div{float:left; width:728px; height: 405px; padding: 0 30px;} 

我的JS:

function sliderScroll(target){
  if(target.length <1)return false;
  $(".current").removeClass("current");
  target.addClass("current");
  $(".scroller").scrollTo(target,500,{axis:'x'});
  return false;
}

我的HTML:

<div class="scroller">
  <div class="modal-content">
     <div>...</div>
     ...
  </div>
</div>

这篇关于jQuery.ScrollTo/jQuery.SerialScroll水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！