jquery - 具有水平线和垂直线的两行滑块？

Question

我正在从事网络开发工作，我完成了从右向左移动并在单个 < Li > 内移动的滑块，但我想创建具有水平线和垂直线的两行滑块。

谁能帮我发展。

如您所见，我要创建下图

Answer 1

我找到了一个新的 jquery 插件。你可以试试这个插件

http://jsabdul.wordpress.com/2013/01/17/multiple-rows-carousel/

Answer 2

我不清楚您对“具有水平线和垂直线的两行滑块”的确切含义。根据图片我可以想到2个解决方案：

1. 您使用普通列表，但每个列表包含两项：

    <ul id="slider">
         <li>
          <span class="row">
           <span class="row_item"><a href="#"><img src="topimage1.jpg"></a></span>
           <span class="row_item"><a href="#"><img src="topimage4.jpg"></a></span>
          </span> 
        </li>
         <li>
          <span class="row">
           <span class="row_item"><a href="#"><img src="topimage2.jpg"></a></span>
           <span class="row_item"><a href="#"><img src="topimage5.jpg"></a></span>
          </span> 
         </li>
         <li>
          <span class="row">
           <span class="row_item"><a href="#"><img src="topimage3.jpg"></a></span>
           <span class="row_item"><a href="#"><img src="topimage6.jpg"></a></span>
          </span> 
         </li>
       </ul>
   
   .row, .row_item{display:block;}
   

2. 您使用两个不同的列表，都由同一组箭头控制：

         <ul id="top_slider">
             <li></li>
         </ul>
         <ul id="bottom_slider">
             <li></li>
         </ul>
   
    And an example of jquery (I assume you're using some slider plugin with a `moveFOrward()` 
    callback, or similar. If you developed your own, adjust accordingly. ):
   
    $('#arrow_left').click(function(e){
       $('#top_slider').moveForward();
       $('#bottom_slider').moveForward();
       e.preventDefault();
    });