$(document).ready(function () { $(".proyydivz").DuZhan_yysoc({ showclass:" .proyydivz .proyydiv", show_leg: "4", showjtcalss: " .proyydivz" , showspanindex: " .proyydivz .proyyspan"}); }); (function ($) { $.fn.DuZhan_yysoc = function (options) { var defaults = { showclass: "proyydiv", showspanindex: "", showtime: "10000", show_leg: "4" }; var showindex = 0; var options = $.extend(defaults, options); var showlist = $(options.showclass + " dl"); var showfirst = showlist.eq(0); if ($(window).width() <= 650) { options.show_leg = 2; }else if($(window).width() <= 1270) { options.show_leg = 3; }else{ options.show_leg = 4; } len = $(options.showclass + " dl").length - options.show_leg+1; var index = 0; var showcur = "cur"; var shownowclass = options.showclass; var picTimer; var sWidth = showfirst.outerWidth(true) * options.show_leg; var movewidth = $(options.showclass + " dl ").outerWidth(true); $(options.showspanindex).html(""); for (var i = 0; i < len; i++) { $(options.showspanindex).append(""); } var showspan = $(options.showspanindex + " span"); showspan.first().addClass(showcur); // picTimer = setInterval(AutoMove, options.showtime); //浏览器变化时 $(window).resize(function () { clearInterval(picTimer); movewidth = $(options.showclass + " dl ").outerWidth(true); len = $(options.showclass + " dl").length - options.show_leg+1; if ($(window).width() <= 650) { options.show_leg = 2; }else if($(window).width() <= 1270) { options.show_leg = 3; }else{ options.show_leg = 4; } }); $(showspan).mouseenter(function () { clearInterval(picTimer); index = $(showspan).index(this); showMove(index); // picTimer = setInterval(AutoMove, options.showtime); }) function AutoMove() { index++; if (index >= len) { showFirPic(); index = 0; } else { showMove(index); } } $(options.showjtcalss).on("click", ".proyyl", function () { if (index > 0) { index--; showMove(); } //else { // $(options.showclass + " .proyydivlist ").prepend(showlist.last().clone()); // var nowLeft = -1 * movewidth; // $(options.showclass + " .proyydivlist").css("left", nowLeft + "px"); // $(options.showclass + " .proyydivlist").stop(true, false).animate({ "left": 0 }, 500, function () { // index = len - 1; // nowLeft = -index * movewidth; // $(options.showclass + " .proyydivlist ").css("left", nowLeft + "px"); // $(options.showclass + " .proyydivlist dl:first").remove(); // }); // } }); $(options.showjtcalss).on("click",".proyyr",function(){ if (index < (len-1)) { index++; showMove(); } }); function showMove() { if (index < len) { var nowLeft = -index * movewidth; $(options.showclass + " .proyydivlist ").stop(true, false).animate({ "left": nowLeft }, 500, function () { }); $(window).trigger('scroll'); showspan.removeClass(showcur).eq(index).addClass(showcur); } else { // showFirPic() } } function showFirPic() { $(options.showclass + " .proyydivlist").append(showfirst.clone()); var nowLeft = -index * movewidth; $(options.showclass + " .proyydivlist").stop(true, false).animate({ "left": nowLeft }, 500, function () { $(options.showclass + " .proyydivlist").css("left", "0px"); $(options.showclass + " .proyydivlist dl:last").remove(); index = 0; showspan.removeClass(showcur).eq(index).addClass(showcur); }); $(window).trigger('scroll'); } //手机版 var rx = 0, tx = 0, ty_end = 0, ismoved = false; $(document).delegate(options.showclass, "touchstart", function (e) { //e.preventDefault(); if (!event.touches.length) return; var touch = event.touches[0]; rx = parseInt(this.style.left || 0); tx = ty_end = touch.pageX; }); $(document).delegate(options.showclass, "touchmove", function (e) { //e.preventDefault(); if (!event.touches.length) return; var touch = event.touches[0]; ty_end = touch.pageX; var x = touch.pageX - tx + rx; if (x <= -(len - 1) * sWidth || x >= 0) { return; } //$(options.showclass + " .indexjxdivlist").css("transform", "translateX(" + x + "px)"); }); $(document).delegate(options.showclass, "touchend", function (event) { if (ty_end > tx + 25) { if (index > 0) { index--; showMove(index) } } else if (ty_end < tx - 25) { if (index < len - 1) { index++; showMove(index) } } }); //结束 } })(jQuery)