<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//自动页面
});
});