更新时间:2020-08-13 23:29:49
var viewNum = 5; //设置每次显示图片的个数量 var tempLength = 0; //临时变量,当前移动的长度 var moveNum = 1; //每次移动的数量 var moveTime = 150; //移动速度,毫秒 var moveLength = this.$thumbnailBox_item.eq(0).outerWidth(true) * moveNum; //计算每次移动的长度 var countLength = (this.$thumbnailBox_item.length - viewNum) * moveLength; //计算总长度,总个数*单个长度 var ov_picL = this.$thumbnailBox_item.length; //获取ul下li的个数 // 原插件是大中小三张图,现改为大中小同时调用一张,省去后台上传时图片还要压缩的烦恼! changeSrouce: function (index, cur_src) { this.$smallBox_pic.attr('src', cur_src); this.$bigBox_pic.attr('src', cur_src); }, //新增当用户未上传图片时显示状态 if (ov_picL == 0) { self.$thumbnailBox.remove(); self.$bigBox.remove(); self.$smallBox_pic.attr('src', 'images/NoneImg.jpg'); self.$smallBox_mask.remove(); } //新增当图片<=5张时显示状态,添加禁用按钮样式 if (countLength <= 5) { $(".thumbnail-box a.btn.btn-prev").addClass("btn-prev_disabled"); $(".thumbnail-box a.btn.btn-next").addClass("btn_next_disabled"); } else { $(".thumbnail-box a.btn.btn-next").removeClass("btn_next_disabled") } //重点改进点击左右图切换功能,原插件只设置了10张图,且点击一次移动5张; //改进后,后台可上传N张图,并且上下按钮点击移动多少张图可随意设置,默认点击一次移动一张图片 //增加切换到第一张和最后一张的按钮显示效果 //点击下一张图 this.$thumbnailBox_next.click(function() { if (tempLength < countLength) { if ((countLength - tempLength) > moveLength) { self.$thumbnailBox_wrapper.animate({ marginLeft: "-=" + moveLength + "px" }, moveTime); tempLength += moveLength; } else { self.$thumbnailBox_wrapper.animate({ marginLeft: "-=" + (countLength - tempLength) + "px" }, moveTime); tempLength += (countLength - tempLength); } } //当图片大于显示个数时,点击下一张按钮即上一张按钮可操作 if (countLength > viewNum) { $(".btn-prev").removeClass("btn_prev_disabled"); } //当下一张图片为最后一张,下一张按钮不可点击 if (tempLength == countLength) { $(".btn-next").addClass("btn_next_disabled") } }); //点击上一张图 this.$thumbnailBox_prev.click(function() { if (tempLength > 0) { if (tempLength > moveLength) { self.$thumbnailBox_wrapper.animate({ marginLeft: "+=" + moveLength + "px" }, moveTime); tempLength -= moveLength; } else { self.$thumbnailBox_wrapper.animate({ marginLeft: "+=" + tempLength + "px" }, moveTime); tempLength = 0; } } if (tempLength < countLength) { $(".btn-next").removeClass("btn_next_disabled") } //当上一张图片为第一张,上一张按钮不可点击 if (tempLength == 0) { $(".btn-prev").addClass("btn_prev_disabled") } });