<div class="bs-part4">
<div class="bs-homebox" id="superSlideWrapper">
<ul id="wws13" class="bsjst">
<li>
<img src="static/picture/20210128111529.jpg" class="zj_img">
</li>
<li>
<img src="static/picture/20210128111529.jpg" class="zj_img">
</li>
<li>
<img src="static/picture/20210128111529.jpg" class="zj_img">
</li>
<li>
<img src="static/picture/20210128111529.jpg" class="zj_img">
</li>
<li>
<img src="static/picture/20210128111529.jpg" class="zj_img">
</li>
<li>
<img src="static/picture/20210128111529.jpg" class="zj_img">
</li>
<li>
<img src="static/picture/20210128111529.jpg" class="zj_img">
</li>
</ul>
<a href="javascript:void(0)" class="super-slide-btn prev">
<img src="static/picture/left_ro.png">
</a>
<a href="javascript:void(0)" class="super-slide-btn next">
<img src="static/picture/right_ro.png">
</a>
</div>
</div>
.bs-part4 {
overflow: hidden;
margin-top: 30px;
}
.bsjst {
display: block;
white-space: nowrap;
}
.bsjst li {
width: 285px;
height: 374px;
margin-right: 20px;
display: inline-block;
}
#superSlideWrapper {
position: relative
}
.bs-part4 .next img {
top: 130px;
position: absolute;
right: 10px;
}
.prev img {
top: 130px;
position: absolute;
left: 10px;
}
一个页面可以重复使用, 需要id不同。 具体参数查看 SuperSlide
$(document).ready(function() {
$('#superSlideWrapper').slide({
mainCell: ".bsjst",
autoPlay: true,//自动播放,true为是
effect: "left",//方向或速度
vis: 4,//可见的数量
autoPage: true//自动页面
});
});
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步