修复仿京东图片放大插件bug（修复原作者bug版）

查看演示立即下载

插件描述：jq22插件库也有该插件，但很好不用，本人基于原作者提供的插件加以改进，实现功能齐全，容易扩展！

更新时间：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")
    }
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery表单向导、步骤条插件jQuerysteps
下一个特效：原生js轮播图插件