如何将旋转木马效果应用于Bootstrap中的表？

Question

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

Answer 1

我不确定这是你在找什么,但这听起来很酷.下面是我想出的"桌上旋转木马效应"(这是我想你要问的).运行代码段以查看效果.您可能需要稍微改变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>