';
_eleThis.append(_eleTemp);
_eleTemp = '
';
_eleThis.append(_eleTemp);
//给
全局变量赋值
_eleImg = $('.zd-imgChange-img');
_eleControll = $('.zd-imgChange-controll');
_eleChange = $('.zd-imgChange-change');
}
//
添加图片
function AddImg() {
for (var i = 0; i < _setting.imgs.length; i++) {
//
图片
_eleTemp = $(document.createElement('img'));
_eleTemp.addClass('zd-imgChange-img-item');
_eleTemp.attr('src',_setting.imgs[i]);
_eleImg.append(_eleTemp);
//图标
_eleControll.append('
' + _icon[1] + '');
//
提示
$(_eleImg.children('img')[i]).attr({ 'title': _setting.tips[i] + '|' + _setting.links[i] });
$(_eleControll.children('span')[i]).attr('title',_setting.tips[i]);
}
Dispose(0,'TtoB');
}
//处理尺寸
function DisSize() {
_eleThis.css({ 'height': _setting.height,'width': _setting.width,'font-size': _setting.height * 0.2 - 2 });
_eleThis.children('button').css('font-size',_setting.height * 0.2 - 2);
_eleChange.css({ 'line-height': _setting.height + 'px' });
}
//处理操作事件
function DisControll() {
_eleImg.children('img').bind('click',function () {//点击
图片跳转
document.location = 'http://' + $(this).attr('title').split('|')[$(this).attr('title').split('|').length - 1];
});
_eleChange.bind('click',function () {//顺序切换
图片
var nowImg = $('.zd-imgChange-img-item-sel');
_eleTemp = _eleImg.children('img');
if ($(this).hasClass('zd-imgChange-change-left')) {//向左切换
for (var i = 0; i < _eleTemp.length; i++) {
if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {
if ((i - 1) < 0) {
Dispose(_eleTemp.length - 1,'RtoL');
} else {
Dispose(i - 1,'RtoL');
}
break;
}
}
} else if ($(this).hasClass('zd-imgChange-change-right')) {//向右切换
for (var i = 0; i < _eleTemp.length; i++) {
if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {
if ((i + 1) > _eleTemp.length - 1) {
Dispose(0,'LtoR');
} else {
Dispose(i + 1,'LtoR');
}
break;
}
}
} else {
return false;
}
});
_eleControll.children('span').bind('click',function () {
for (var i = 0; i < _eleControll.children('span').length; i++) {
if ($(_eleControll.children('span')[i]).attr('title') == $(this).attr('title')) {
if ($(_eleImg.children('img')[i]).attr('src') != $('.zd-imgChange-img-item-sel').attr('src')) {//判断是否点击的同一个标签
Dispose(i,'TtoB');
}
break;
}
}
});
}
//切换器
function Dispose(eNum,dir) {//切换图片
clearTimeout(_timers);
DisposeAnm();
$(_eleControll.children('span')).html(_icon[1]);
$(_eleControll.children('span')[eNum]).html(_icon[0]);
$('.zd-imgChange-change-left').attr('title',eNum - 1 >= 0 ? $(_eleControll.children('span')[eNum - 1]).attr('title') : $(_eleControll.children('span')[_eleControll.children('span').length - 1]).attr('title'));
$('.zd-imgChange-change-right').attr('title',eNum + 1 <= _eleControll.children('span').length - 1 ? $(_eleControll.children('span')[eNum + 1]).attr('title') : $(_eleControll.children('span')[0]).attr('title'));
_timers = setTimeout(Timers,_setting.timers);
//切换动画--根据z-index实现视觉
效果
function DisposeAnm() {
$('.zd-imgChange-img-item').removeClass('zd-imgChange-img-item-temp');
$('.zd-imgChange-img-item-sel').removeClass('zd-imgChange-img-item-sel').addClass('zd-imgChange-img-item-temp');
_eleTemp = $(_eleImg.children('img')[eNum]).addClass('zd-imgChange-img-item-sel');
if (dir == 'TtoB') {
_eleTemp.css('top',-_setting.height);
_eleTemp.animate({ top: 0 },300);
} else if (dir == 'RtoL') {
_eleTemp.css('left',_setting.width);
_eleTemp.animate({ left: 0 },300);
} else if (dir == 'LtoR') {
_eleTemp.css('left',-_setting.width);
_eleTemp.animate({ left: 0 },300);
}
}
}
//
自动切换时钟
function Timers() {
_timers = setTimeout(Timers,_setting.timers);
var nowImg = $('.zd-imgChange-img-item-sel');
_eleTemp = _eleImg.children('img');
for (var i = 0; i < _eleTemp.length; i++) {
if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {
if ((i - 1) < 0) {
Dispose(_eleTemp.length - 1,'TtoB');
} else {
Dispose(i - 1,'TtoB');
}
break;
}
}
}
})($)
HTML代码部分：
">
图片切换
" alt="图片加载错误!" title="提示" />
d
-->
ps:尽量使用高版本浏览器，目测测试浏览器：IE11 IE10 IE6 google 猎豹 欧鹏 可以完美运行，IE6透明效果有损失
代码下载：
