文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦。。。
(function ($) {
var//申明全局变量
_eleTemp,//缓存变量
_eleThis = $(this),//当前元素
_eleImg = $('.zd-imgChange-img'),//图片组元素
_eleControll = $('.zd-imgChange-controll'),//控制器组元素
_eleChange = $('.zd-imgChange-change'),//切换元素
_icon = '●○',//动态图标
_imgTemplate = $(document.createElement('img')),//图片模版'
_setting = {
height: 100,//高
width: 200,//宽
imgs: new Array(),//图片地址
links: null,//点击地址
tips: null,//图片说明
timers: 3000//自动切换时间
},//配置
_timers = null//自动切换保存变量
$.fn.zoeDylan_ImageChange = function (op) {
_eleThis = $(this);
_setting = $.extend(_setting, op);//设置属性
//处理数据(查看是否为合法范围)
_setting.timers = _setting.timers != null && _setting.timers != undefined && _setting.timers > 1000 ? _setting.timers : 1000;
_setting.height = parseFloat(_setting.height)
_setting.width = parseFloat(_setting.width)
return this.each(function () {//初始化
AddTemplate();
AddImg();
DisSize();
DisControll();
})
}
//添加模版
function AddTemplate() {
_eleThis.removeClass();
_eleThis.addClass('zd-imgChange');
_eleTemp = '
http://www.w3.org/1999/xhtml">
图片切换