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

Question

enter image description here 在此处输入图片说明

HOw to make text moving by clicking previous icon and next icon?like image slider...i want only 10 text to visible..rest all r to hide...nd by clicking all should appear.... i dont know javascript please help me!! 如何通过单击上一个图标和下一个图标来使文本移动？例如图像滑块...我只希望显示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

Have a look at this: http://jsbin.com/dopudeduto/edit?html,css,js,output 看看这个： http : //jsbin.com/dopudeduto/edit?html,css,js,output

I included the bootstrap pagination, which was recommended in your comments. 我包括了引导分页，这在您的评论中被推荐。
You can change to amount of li's that is displayed modifying the limit variable. 您可以更改限制变量来更改显示的li数量。
in the beginning all li's but the first 3 are hidden using a data-attribute (they are hidden using css) 在开始时，除了前三个外，所有li都使用数据属性隐藏（使用css隐藏）
afterwards the event listener are bound to the buttons 之后，将事件侦听器绑定到按钮
in the functions for prev it first checks whether the first li is already shown 在上一个功能中，它首先检查是否已经显示了第一个li
- if not the last element is hidden 如果不是最后一个元素被隐藏
- and the element before the currently first one is displayed 并显示当前第一个元素之前的元素

Let me know if you have any problems with this solution. 如果您对此解决方案有任何疑问，请告诉我。

如何通过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