javascript - 如何在 Bootstrap 中对表格应用轮播效果？

Question

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

Answer 1

我不确定这是否是您要找的东西，但听起来是个不错的主意。这是我想出的“ table 上的旋转木马效果”(我想你是在问这个)。运行代码片段以查看效果。您可能需要稍微更改 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>