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