如何通过javascript和jQuery使文本滚动（如通过单击上一个下一个图标来滑动文本）

Question

如何通过单击上一个图标和下一个图标来使文本移动？例如图像滑块...我只希望显示10个文本。请帮我！！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" />
<style>
.new_line {
    width:780px;
    margin:0 auto;
    height:50px;
    }

.new_line ul li {
    list-style-type:none;
    float:left;
    padding:10px 22px ;
    }

.new_line ul li img {
    float:left;}
</style>
</head>

<body>
<div class="new_line">
  <ul>
  <li> <img src="next.png"/> </li>
    <!--<li> <a href="#"> text 1</a> </li>
    <li> <a href="#"> text 2</a></li>-->
    <li> <a href="#"> text 3</a></li>
    <li> <a href="#"> text 4</a></li>
    <li> <a href="#"> text 5</a></li>
    <li> <a href="#"> text 6</a></li>
    <li> <a href="#"> text 7</a></li>
    <li> <a href="#"> text 8</a></li>
    <li> <a href="#"> text 9</a></li>
    <li> <a href="#"> text 10</a></li>
    <!--<li> <a href="#"> text 11</a></li>
    <li> <a href="#"> text 12</a></li>-->
    <li> <img src="prev.png"/> </li>
  </ul>
</div>
</body>
</html>

Answer 1

看看这个： http : //jsbin.com/dopudeduto/edit?html,css,js,output

我包括了引导分页，这在您的评论中被推荐。
您可以更改限制变量来更改显示的li数量。
在开始时，除了前三个外，所有li都使用数据属性隐藏（使用css隐藏）
之后，将事件侦听器绑定到按钮
在上一个功能中，它首先检查是否已经显示了第一个li
- 如果不是最后一个元素被隐藏
- 并显示当前第一个元素之前的元素

如果您对此解决方案有任何疑问，请告诉我。

如何通过javascript和jQuery使文本滚动（如通过单击上一个下一个图标来滑动文本）

问题描述

1 个解决方案

解决方案1
0 2015-12-12 16:05:39

如何通过javascript和jQuery使文本滚动（如通过单击上一个下一个图标来滑动文本）

问题描述

1 个解决方案

解决方案1 0 2015-12-12 16:05:39

解决方案1
0 2015-12-12 16:05:39