$(window).load(function() { $(".picchange1").picchange({ animatetime : 1000, //背景图片动画切换时间,默认 1000(毫秒) imgswitchtime : 5000, //背景图片切换间隔时间,默认 5000(毫秒) animateeffect : 0, //效果,默认 0随机,1淡入淡出,2缩小,3放大,4左移,5右移,6上移,7下移,8下入,9上入,10左入,11右入; matchingarea: true, //图片匹配显示区域,true|false button : "thumb" //显示按钮, "num"(默认)数字页码|"thumb"图片按钮|"dot"点 }); $(".picchange2").picchange({ animateeffect : 3, button : "num" }); $(".picchange3").picchange({ animateeffect : 4, button : "dot" }); $(".picchange4").picchange({ animateeffect : 7, button : "num" }); $(".picchange5").picchange({ animateeffect : 0, button : "num" }); }); /* picchange 0.94 图片切换 copyright (c) 2014 zhibinpu date: 2014-12-31 jquery-1.12.4.min.js */ (function($) { $.fn.picchange = function(options) { var defaults = { animatetime : 1000, //背景图片动画切换时间,默认 1000(毫秒) imgswitchtime : 5000, //背景图片切换间隔时间,默认 5000(毫秒) animateeffect : 0, //效果,默认 0随机,1淡入淡出,2缩小,3放大,4左移,5右移,6上移,7下移,8下入,9上入,10左入,11右入; matchingarea: true, //图片匹配显示区域,true|false button : "dot" //显示按钮, "num"(默认)数字页码|"thumb"图片按钮|"dot"点 } var options = $.extend(defaults, options); var $obj = this; var animatetime = options.animatetime; var imgswitchtime = options.imgswitchtime+animatetime; var animateeffect = options.animateeffect; var matchingarea = options.matchingarea; var myinterval; //显示区域 var showarea = { width: $obj.width(), height: $obj.height(), ratio: $obj.width()/$obj.height() } //图片列表 var piclist = { $obj: null, now: 0, next: 1, length: 0, left:[], top:[], width:[], height:[], ratio:[], src: [], title: [], href: [] } //标题 var title = { $obj: null } //按钮 var button = { $obj: null } //图片切换效果 var effect = { eade : function(){ piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", opacity: 0}).animate({opacity: 1}, animatetime); }, zoomin : function(){ var top = showarea.height/2; var left = showarea.width/2; piclist.$obj.eq(piclist.now).animate({opacity: 0, width: 0, height: 0, top: top, left: left}, animatetime, effectfinish); piclist.$obj.eq(piclist.now).find("img").animate({width: 0, height: 0}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", opacity: 0}).animate({opacity: 1}, animatetime); }, zoomout : function(){ var p = 0.5; var width = piclist.width[piclist.now]*p+piclist.width[piclist.now]; var height = piclist.height[piclist.now]*p+piclist.height[piclist.now]; var top = -(height-showarea.height)/2; var left = -(width-showarea.width)/2; piclist.$obj.eq(piclist.now).animate({opacity: 0, width: width, height: height, top: top, left: left}, animatetime, effectfinish); piclist.$obj.eq(piclist.now).find("img").animate({width: width, height: height}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", opacity: 0}).animate({opacity: 1}, animatetime); }, moveleft : function(){ var left = showarea.width; var left1 = piclist.left[piclist.next]; piclist.$obj.eq(piclist.now).animate({ left: -left}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", left: left}).animate({ left: left1}, animatetime); }, moveright : function(){ var left = showarea.width; var left1 = piclist.width[piclist.next]; var left2 = piclist.left[piclist.next]; piclist.$obj.eq(piclist.now).animate({ left: left}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", left: -left1}).animate({ left: left2}, animatetime); }, movetop : function(){ var top = showarea.height; var top1 = piclist.height[piclist.now]; var top2 = piclist.top[piclist.next]; piclist.$obj.eq(piclist.now).animate({ top: -top1}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", top: top}).animate({ top: top2}, animatetime); }, movedown : function(){ var top = showarea.height; var top1 = piclist.height[piclist.next]; var top2 = piclist.top[piclist.next]; piclist.$obj.eq(piclist.now).animate({ top: top}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", top: -top1}).animate({ top: top2}, animatetime); }, slidedown : function(){ var top = showarea.height; var top1 = piclist.top[piclist.next]; piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", top: top, opacity: 0}).animate({opacity: 1, top: top1}, animatetime); }, slideup : function(){ var top = showarea.height; var top1 = piclist.height[piclist.next]; var top2 = piclist.top[piclist.next]; piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", top: -top1, opacity: 0}).animate({opacity: 1, top: top2 }, animatetime); }, slideleft : function(){ var left = showarea.width; var left1 = piclist.width[piclist.next]; var left2 = piclist.left[piclist.next]; piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", left: -left1, opacity: 0}).animate({opacity: 1, left: left2}, animatetime); }, slideright : function(){ var left = showarea.width; var left1 = piclist.left[piclist.next]; piclist.$obj.eq(piclist.now).animate({opacity: 0}, animatetime, effectfinish); piclist.$obj.eq(piclist.next).css({"display": "block", left: left, opacity: 0}).animate({opacity: 1, left: left1}, animatetime); } } //执行主程序 main(); //主程序 function main() { //初始化操作 loaddata(); loadpiclist(); resetpiclistwh(); setpiclistpos(); loadtitle(); loadbutton(); //显示 showpic(); showtitle(); showbutton(); if( piclist.length > 1){ //添加鼠标点击事件 button.$obj.find("span").bind("click", clickbutton); //运行切换效果 myinterval = setinterval(change, imgswitchtime); } resize(); } //初始化图片切换数据 function loaddata() { $obj.find("li").each(function() { var imgsrc = $(this).find("img").attr("src"); if( imgsrc != "/" && imgsrc != undefined && imgsrc != ""){ piclist.width.push($(this).find("img").width()); piclist.height.push($(this).find("img").height()); piclist.src.push($(this).find("img").attr("src")); piclist.title.push($(this).text()); piclist.href.push($(this).find("a").attr("href")); piclist.ratio.push($(this).find("img").width()/$(this).find("img").height()); piclist.length ++; } }); $obj.empty(); } //====================================================图片相关========================================================= //载入图片 function loadpiclist() { //写入图片区域 $obj.append(function() { cont = '