如何将轮播效果应用于 Bootstrap 中的表格？答案

【问题标题】：How to apply a carousel effect to a table in Bootstrap?如何将轮播效果应用于 Bootstrap 中的表格？
【发布时间】：2016-06-30 04:10:10
【问题描述】：

我们可以通过添加表格响应类来使表格可滚动，但是我们如何循环它以便一旦循环结束，第一列将跟随最后一列，就好像它是相邻列一样。（当我们应用选取框时不会发生这种情况）

【问题讨论】：

你的意思是冻结第一列并在滚动时跟随吗？
对不起，没有。我的意思是我需要循环滚动整个列表，没有任何延迟。
@Shank 我想他想要在桌子上“像”旋转木马效果。
我相信 bootstrap 本身并没有这个功能。也不确定是否有任何图书馆能够做到这一点。尝试自己编写代码，如果需要帮助，请发布代码。

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

我不确定这就是您要找的东西，但这听起来是个很酷的主意。这就是我想出的“桌子上的旋转木马效果”（我认为您要问的是）。运行代码sn -p 看看效果。您可能需要稍微修改一下 CSS 以获得无缝滚动效果。

var $table = $('.table-wrapper table');

var leftTimeout, left = $('.left');

function scrollLeft(){
	$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()-50);
	$.each($table.find('tr'),function(){
		$(this).children().last().detach().prependTo(this);
	});
}

left.mousedown(function(){
	scrollLeft();
    leftTimeout = setInterval(function(){
    	scrollLeft();
    }, 500);

    return false;
});
$(document).mouseup(function(){
    clearInterval(leftTimeout);
    return false;
});

var rightTimeout, right = $('.right');

function scrollRight(){
	$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()+50);
	$.each($table.find('tr'),function(){
		$(this).children().first().detach().appendTo(this);
	});
}

right.mousedown(function(){
	scrollRight();
    leftTimeout = setInterval(function(){
    	scrollRight();
    }, 500);

    return false;
});
$(document).mouseup(function(){
    clearInterval(rightTimeout);
    return false;
});

.table-wrapper
{    	
    border: 1px solid red;
    width: 200px;
    height: 150px;        
    overflow:hidden;
}

table
{
    border: 1px solid black;
    margin-right: 20px;
}

td
{
    min-width: 50px;
    height: 20px;
    background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table-wrapper">
    <table>
        <tr>
        	<th>1h</th>
            <th>2h</th>
            <th>3h</th>
            <th>4h</th>
            <th>5h</th>
            <th>6h</th>
            <th>7h</th>
            <th>8h</th>
            <th>9h</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>      
</div>

<button class='left'><</button>
<button class='right'>></button>

【讨论】：