javascript - jquery 简单的 ul li 内容 slider

标签 javascript jquery html css

我试图制作一个 super 简单的 ul li (content) slider 。我的目标是添加一个 prevnext 按钮。

两个按钮都可以正常工作,但我的问题是滑动效果。 next 滑动很酷,但是prev 按钮不是,我不知道如何让它像next按钮滑动。

$("ul li:gt(0)").hide();

$('#Next').click(function(){
  $('ul > li:first')
    .slideUp(1000)
    .next()
    .slideDown(1000)
    .end()
    .appendTo('ul');
});

$('#Prev').click(function(){
  $('ul > li:last')
    .slideDown(1000)
    .prev()
    .slideUp(1000)
    .end()
    .prependTo('ul');
  $("ul li:gt(0)").slideUp();
});
li {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<a id="Prev">Prev</a>
<a id="Next">Next</a>

最佳答案

试试下面的。添加 $("ul li:gt(0)").slideUp(1000);

$("ul li:gt(0)").hide();

$('#Next').click(function(){
  $('ul > li:first')
    .slideUp(1000)
    .next()
    .slideDown(1000)
    .end()
    .appendTo('ul');
});

$('#Prev').click(function(){
  $('ul > li:last')
    .slideDown(1000)
    .prev()
    .slideUp(1000)
    .end()
    .prependTo('ul');
$("ul li:gt(0)").slideUp(1000);
});
li {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<a id="Prev">Prev</a>
<a id="Next">Next</a>

关于javascript - jquery 简单的 ul li 内容 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39787724/

相关文章:

javascript - 如何检查应用程序是否从 Safari 中的 JS 安装?

javascript - 将一系列值映射到另一个值

android - 将控制权从 html 传递到 android 以调用 android 方法

javascript - 发布请求时 Object.assign 进行复制

jquery - 切换行时,列宽会发生变化(在宽度为 100% 的表格上)

php - jQuery 无法处理加载的内容

javascript - 如何在javascript中调用输入id

iphone - iPhone 上的 HTML5 地理定位问题

html - 溢出隐藏不起作用 - 试图将溢出隐藏在容器中但它会剪切图片

javascript - 将 ID(Index) 传递给 onEditDetail() 参数