下面是我找的 JS 轮播图插件,点左箭头滑动到第一张缩略图时,后面是空白的,如何让它循环起来呢,应该如何解决?前端新手,请指教,感激不尽
以下是代码:
var thumbNum=$("#ProductThumbs .Product_Thumbs").length;
var thumbActive=$("#ProductThumbs .active-thumb").parent("li").index();
$("#ProductThumbs").css('width', thumbNum * 90 + 'px');
$("#ProductThumbs").css('left', '-' + thumbActive * 0 + 'px');
$('body').on('click', '#prev_btn2', function () {
if(thumbActive<thumbnum-1){ $("#productthumbs").css('left',="" '0px');="" (thumbactive="" if="" thumbactive="0;" thumbactive++;="" }="" }else{=""> 4) {
$("#ProductThumbs").css('left', '-' + (thumbActive - 4) * 90 + 'px');
}
$("#ProductThumbs .Product_Thumbs").eq(thumbActive).find(".product-single__thumb").click();
});
$('body').on('click', '#prev_btn1', function () {
if(thumbActive>0){
thumbActive--;
}else{
thumbActive=thumbNum-1;
}
if (thumbActive === 0) {
$("#ProductThumbs").css('left', '0px');
} else {
$("#ProductThumbs").css('left', '-' + thumbActive * 90 + 'px');
}
$("#ProductThumbs .Product_Thumbs").eq(thumbActive).find(".product-single__thumb").click();
});
});</thumbnum-1){>
1
moonshow OP 自顶,刚学完 html+css 开始学 js 感觉好难呀,大家有什么推荐的视频课程?
|
2
phxsuns 2019-05-26 15:18:38 +08:00
感觉这个插件的交互设计的有点问题。
如果是最后几张的话,不应该整体向前移动的。 |
4
lzxgh621 2019-05-26 15:33:34 +08:00 via Android
无限循环体验不好
看看别的样式的 demo 吧 |
5
lzxgh621 2019-05-26 15:34:58 +08:00 via Android 1
还有 你那确定不是最后一张图而是第一张?
|
6
moonshow OP @lzxgh621 感谢回复,右侧箭头是正常的,<img src="https://s2.ax1x.com/2019/05/26/VEgxnU.gif">
应该是最后一张图, 你可以打开网址看下 https://www.coolestsale.com/collections/wireless-charger/products/captain-america-superman-wireless-charger |