滚动插件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 });(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/05/25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读