imgChange-jquery插件-多功能幻灯片

时间: 2013-12-10 分类: Javascript 作者: SAI

TAGS:,

插件说明:
当前版本imgchange V2.1 (标准大小:10.5k,压缩后:4.81k)
实现对象切换的插件其实网上很多,
但是应用起来总是不够实用,所以干脆自己写了一个,
以上为此插件所有参数,从前端开发角度出发,充分利用css样式的灵活性,脚本调用方式简单,
基本满足了现在常见开发中遇到的常用js效果,具体实际应用及代码参考以下的例子。
注:兼容全部主流浏览器

参数:
$('#bigimg li').imgChange({
	thumbObj: '.tlist li',//缩略图对象;
	botPrev: '.prev',//上一个对象;
	botNext: '.next',//下一个对象;
	effect: 'fade',//效果,参数:fade,scroll,wfScroll(无缝滚动steps:2,changeTime:50),wb,stream,turnDown,
zoom,flyFade,tab,flipper,cutIn,alternately
	curClass: 'act',//当前缩略图对象的样式名
	thumbOverEvent: 1,//鼠标悬停是否切换1为自动切换,2为点击切换
	speed: 400,//切换速度
	autoChange: 1,//是否自动切换,选项卡(滑动门)时设置为0
	changeTime: 5000,//自动切换的等待时间
	delayTime: 0,//鼠标悬停的延迟时间
	showTxt: 0,//是否显示标题,标题调用img里的alt值
	visible:1,//显示对象的个数
	steps:1, //每次滚动的数量,effect==wfscroll时,每次滚动的距离
	circular: 0,//是否循环滚动
	vertical:1,//方向
	easing: 'swing'//动画效果,需要easing插件支持
	wrapSize:0,//无缝滚动的外层宽度
	beforeStart:function(){$('.txt').hide},//效果执行前的函数
	afterEnd:null,//效果完成后的函数
})
调用方法
第一步:
    <script type="text/javascript" src="http://www.saiody.com/imgchange/jquery.js"></script>
第二步:
    <script type="text/javascript" src="http://www.saiody.com/imgchange/jq.imgchange.js"></script>
第三步:
    <script type="text/javascript">
        $('#obj').imgChange();
    </script>
猛击这里下载:
	标准:jq.imgchange2.1.js(10.7k)
	压缩:jq.imgchange2.1.min.js(4.81k)
历史版本:
	1.jq.imgchange1.0.js(5.30k)
	2.jq.imgchange2.0.js(16.8k)

jquery插件–imgchangeV2.1演示

imgchange

Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » Javascript » imgChange-jquery插件-多功能幻灯片
本文地址:http://www.saiody.com/?p=1048

返回顶部