完美兼容各大浏览器的jQuery插件实现图片切换特效

文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件)，对网友们的学习是很有帮助的，虽然样式不太好看，大家可以自己写，好好利用哦。。。

JS代码部分：

代码如下:

1000 ? _setting.timers : 1000; _setting.height = parseFloat(_setting.height) < 100 ? 100 : parseFloat(_setting.height); _setting.width = parseFloat(_setting.width) < 200 ? 200 : parseFloat(_setting.width); return this.each(function () {//初始化 AddTemplate(); AddImg(); DisSize(); DisControll(); }) } //添加模版 function AddTemplate() { _eleThis.removeClass(); _eleThis.addClass('zd-imgChange'); _eleTemp = ''; _eleThis.append(_eleTemp); _eleTemp = '

'; _eleThis.append(_eleTemp); _eleTemp = '

'; _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; } } } })($)

CSS代码部分：

代码如下:

HTML代码部分：

代码如下:

"> 图片切换

" alt="图片加载错误!" title="提示" />

d

-->

ps:尽量使用高版本浏览器，目测测试浏览器：IE11 IE10 IE6 google 猎豹 欧鹏 可以完美运行，IE6透明效果有损失

代码下载：