2019独角兽企业重金招聘Python工程师标准>>>
<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 });