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

【问题标题】：how to make text scroll ( like text to slide by clicking prev n next icon) through javascript and jQuery如何通过javascript和jQuery使文本滚动（如通过单击上一个和下一个图标滑动的文本）
【发布时间】：2015-12-13 00:05:39
【问题描述】：

enter image description here

如何通过单击上一个图标和下一个图标使文本移动？像图像滑块...我只希望 10 个文本可见..让所有 r 隐藏...nd 通过单击全部应该出现....我不懂javascript请帮帮我！！

<!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>

【问题讨论】：

使用更好的分页。
我正在使用引导程序，您可以使用轮播来执行此操作。
是的，轮播会帮助你。
w3schools.com/bootstrap/bootstrap_pagination.asp 看到这会帮助你。另见w3schools.com/bootstrap/bootstrap_carousel.asp
这可能对codepen.io/zuraizm/pen/vGDHl有帮助

标签： javascript jquery

【解决方案1】：

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

我包含了引导分页，这是您在厘米。
您可以更改显示的 li 数量，以修改限制变量。
一开始，除了前 3 个以外的所有 li 都使用数据属性隐藏（使用 css 隐藏）
之后事件监听器绑定到按钮
在 prev 的函数中，它首先检查第一个 li 是否已经显示
- 如果不是最后一个元素被隐藏
- 并显示当前第一个元素之前的元素

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

【讨论】：

我其实是想把这个放到我的项目中..但是我不能这样做...不知道原因
您需要在项目中包含引导程序。将 HTML、CSS 和 JS 复制到特定文件中或将其包含在 html 中。您可以使用文件 > 下载对话框下载版本。如果您遇到问题，请告诉我。