jquery焦点图文字和图片动画焦点图展示

代码笔记       294KB      2013-05-19 11:03:29    
$(function(){
 
$("#focus").mogFocus({
 
loadAnimation : true, //效果初次加载是否有动画效果
 
loadswitch : false,//是否开启loading
 
loading : "images/loading.gif",//loading图片路径
 
time : 4000,//间隔时间
 
scrollWidth : "100%",//焦点图宽度,任意数值,设置为100%或者auto时,占满全屏
 
autoScroll : true,//是否自动滚动
 
conversionImg : true,//此参数是用来兼容第二层滑动层IE的PNG图片,开启为true,反之为false
 
animationWay: 'tbSliding',//此参数提供fade(淡入淡出),lrSliding(左右滑动),tbSliding(上下滑动),随机展示(randomImg)
 
prevNextPos : 70,//上一页下一页初始位置调整
 
prevNextAnima : {duration: 600, easing: "easeInOutBack"},//按钮滑动出来的方式,支持缓动公式,如果直接设置数值,那么就没有缓动效果
 
prevNextToggle : "show",//设置为toggle时鼠标放到滑动图上显示,离开影藏。设置show时一直显示,设置hide时影藏
 
btnStyle : "thumbnail",//参数有四个分别是number(数字),noNumber(非数字,任意图形),thumbnail(缩略图),hidden(影藏)
 
thumWidth : 90,//缩略图宽度
 
thumHeight : 36,//缩略图高度
 
thumlen : 5,//缩略图显示个数
 
thumCSS : {"right":"50%","margin-right":-390},//提供当全屏滑动时缩略图位置
 
thumSubsty : {"border":"1px solid #ccc","padding":1,"background":"#fff"},//缩略图样式
 
thumSelected : {"border":"1px solid #6d6d6d","background":"#fff"},//缩略图选中样式
 
single: true,//设置true则显示第二层,false则第二层影藏
 
focusDelay: 0,//焦点图延迟时间
 
focusDelayTwo : 300,//第二层焦点图延迟时间
 
focusTime : {duration: 1000, easing: "easeOutBounce"},//左右焦点图时间,支持缓动公式,如果直接设置数值,那么就没有缓动效果
 
focusTwoTime : {duration: 1300, easing: "easeOutBounce"} ,//左右第二层焦点图时间,支持缓动公式,如果直接设置数值,那么就没有缓动效果
 
fadeTime : 400,//该参数使用淡入淡出动画生效,控制淡入速度
 
fadeTwoTime : 600,//该参数使用淡入淡出动画生效 控制第二层淡入速度
 
randomsImgTime : 600,//该参数在使用随机动画生效,控制滑动速度
 
randeasing : 'easeInOutBack'//该参数在使用随机动画生效,控制easing滑动样式
 
});
 
});
效果预览 本地下载 打赏