Question

我正在尝试制作水平滚动新闻页面。我在这个结构中显示了我的新闻：

<div id="news-container">
  <div id="news-wrapper">
    <div id="news">
      Some news content goes here
    </div>
    <div id="news">
      Some second news content goes here
    </div>
  </div>
</div>

我正在下面添加CSS以使其全部水平（我正在使用jQuery计算#news包装器宽度，因此所有新闻项都适合它）：

#news-container {
    overflow: hidden;
}
#news {
    width: 350px;
    display: inline-table;
}

现在我一直在尝试使用jQuery添加一些next / prev按钮并使用serialScroll但不知道如何让它工作！我添加了按钮（没有CSS，当它们工作时生病了）：

<img class="prev" src="img/prev.gif" alt="prev" width="42" height="53" />
<img class="next" src="img/next.gif" alt="next" width="42" height="53" />

这是从一些SerialScroll插件示例中复制和修改的js。我不知道如何让它工作以及如何将任何操作附加到我的按钮（尝试使用.click（）和插件中的一些触发器选项但没有效果）

$("#news-container").serialScroll({
  target:'#news-container',
  items:'div',
  prev:'#prev',
  next:'#next',
  axis:'xy',
  navigation:'a',
  duration:700,
  force:true,
})

@edit：这是我一直关注的演示： http://demos.flesler.com/jquery/serialScroll/

Answer 1

首先，$(#news-container)需要$("#news-container")

Answer 2

将两张图片或<img class="prev" ...更改为<img id="prev" ... 变化

  prev:'#prev',
  next:'#next',

到

  prev:'.prev',
  next:'.next',

jQuery.serialScroll - 无法让它工作

2 个答案: