滾動插件SuperSlide的用法

<div class="weather-box">
                        <ul class="row list-unstyled weather-ul">
                            <li class="weather-box-li">
                                <div class="whether-time pull-left">今天</div>
                                <div class="pull-left whether-logo">
                                    <div><img src="../../dist/img/changeSunny.png" alt="" /></div>
                                </div>
                                <div class="pull-left weather-infor">
                                    <div>21 ~ 15 ℃</div>
                                    <div>1.01325 bar</div>
                                </div>
                            </li>
                            <li class="weather-box-li">
                                <div class="whether-time pull-left">明天</div>
                                <div class="pull-left whether-logo">
                                    <div><img src="../../dist/img/sunny.png" alt="" /></div>
                                </div>
                                <div class="pull-left weather-infor">
                                    <div>21 ~ 15 ℃</div>
                                    <div>1.01325 bar</div>
                                </div>
                            </li>
                            <li class="weather-box-li">
                                <div class="whether-time pull-left">後天</div>
                                <div class="pull-left whether-logo">
                                    <div><img src="../../dist/img/cloudy.png" alt="" /></div>
                                </div>
                                <div class="pull-left weather-infor">
                                    <div>21 ~ 15 ℃</div>
                                    <div>1.01325 bar</div>
                                </div>
                            </li>
                            <li class="weather-box-li">
                                <div class="whether-time pull-left">7/8日</div>
                                <div class="pull-left whether-logo">
                                    <div><img src="../../dist/img/rain.png" alt="" /></div>
                                </div>
                                <div class="pull-left weather-infor">
                                    <div>21 ~ 15 ℃</div>
                                    <div>1.01325 bar</div>
                                </div>
                            </li>
                            <li class="weather-box-li">
                                <div class="whether-time pull-left">7/9日</div>
                                <div class="pull-left whether-logo">
                                    <div><img src="../../dist/img/snow.png" alt="" /></div>
                                </div>
                                <div class="pull-left weather-infor">
                                    <div>21 ~ 15 ℃</div>
                                    <div>1.01325 bar</div>
                                </div>
                            </li>
                            <li class="weather-box-li">
                                <div class="whether-time pull-left">7/10日</div>
                                <div class="pull-left whether-logo">
                                    <div><img src="../../dist/img/rain.png" alt="" /></div>
                                </div>
                                <div class="pull-left weather-infor">
                                    <div>21 ~ 15 ℃</div>
                                    <div>1.01325 bar</div>
                                </div>
                            </li>
                        </ul>
                    </div>

.weather-box{border:1px solid #5575a7;margin-bottom:10px;height:66px;overflow:hidden;}
.weather-box-li{background:#485973;border-right:1px solid #5575a7;padding:0;}
.weather-box-li:nth-child(3n){}
.weather-ul li { float:left; width:33%; background:#485973;border-right:1px solid #5575a7;}
.weather-ul li:nth-child(2) {width:34%;}
.whether-time{color:#fff;font-size:25px;height:66px;line-height:66px;margin-right:15px;margin-left:15px;}
.whether-logo{margin-right:15px;}
.whether-logo>div{height:66px;display:table-cell;vertical-align:middle;}
.whether-logo img{width:55px;}
.weather-infor{color:#00ffff;font-size:22px;}

<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
 <script src="../../dist/js/jquery.SuperSlide.js"></script>
 <script type="text/javascript">
      jQuery(".weather-box").slide( {mainCell:".weather-ul",effect:"leftLoop",vis:3,scroll:1,autoPlay:true} );
 </script>

注意：.weather-box-li 不能設置padding值，會致使滾動異常。

此插件也支持表格向上不停滾動，可是須要把表格放到li裏面

<div class="outscrolldiv" style="height:300px;overflow:hidden;border-bottom:1px solid #ccc;">
    <ul class="shuchaguanliTab list-unstyled">
        <li>
            <table class="table table-bordered table-striped  ">
                <tbody>
                    <tr>
                        <td id="title1"><span class="badge bg-primary">1</span></td>
                        <th id="title2">行業名稱1</th>
                        <td id="title3">崑山</td>
                        <td id="title4">50</td>
                        <td id="title5">20</td>
                        <td id="title6">30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">2</span></td>
                        <th>行業名稱1行業名稱1行業名稱1</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">3</span></td>
                        <th>行業名稱1</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">4</span></td>
                        <th>行業名稱1</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">5</span></td>
                        <th>行業名稱1</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">6</span></td>
                        <th>行業名稱1</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">7</span></td>
                        <th>行業名稱1</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">8</span></td>
                        <th>行業名稱1</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">9</span></td>
                        <th>行業名稱1</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">10</span></td>
                        <th>行業名稱1</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">1</span></td>
                        <th>行業名稱2</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">2</span></td>
                        <th>行業名稱2</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">3</span></td>
                        <th>行業名稱2</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">4</span></td>
                        <th>行業名稱2</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td><span class="badge bg-primary">5</span></td>
                        <th>行業名稱2</th>
                        <td>崑山</td>
                        <td>50</td>
                        <td>20</td>
                        <td>30</td>
                    </tr>
                </tbody>
            </table>
        </li>
    </ul>
</div>

jQuery(".outscrolldiv").slide({ mainCell: ".shuchaguanliTab", effect: "topMarquee", vis: 1, interTime: 40, autoPlay: true });