墨芈深夜发布插件——图片切换 附上下载地址：http://pan.baidu.com/s/17kKF3共享天地/【墨芈 插件】zoeDylan Plugins
Code
JS
1 (function ($) { 2 var//申明全局变量 3 _eleTemp,//缓存变量 4 _eleThis = $(this),//当前元素 5 _eleImg = $('.zd-imgChange-img'),//图片组元素 6 _eleControll = $('.zd-imgChange-controll'),//控制器组元素 7 _eleChange = $('.zd-imgChange-change'),//切换元素 8 _icon = '●○',//动态图标 9 _imgTemplate = $(document.createElement('img')),//图片模版' 10 _setting = { 11 height: 100,//高 12 width: 200,//宽 13 imgs: new Array(),//图片地址 14 links: null,//点击地址 15 tips: null,//图片说明 16 timers: 3000//自动切换时间 17 },//配置 18 _timers = null//自动切换保存变量 19 $.fn.zoeDylan_ImageChange = function (op) { 20 21 _eleThis = $(this); 22 _setting = $.extend(_setting, op);//设置属性 23 //处理数据(查看是否为合法范围) 24 _setting.timers = _setting.timers != null && _setting.timers != undefined && _setting.timers > 1000 ? _setting.timers : 1000; 25 _setting.height = parseFloat(_setting.height) < 100 ? 100 : parseFloat(_setting.height); 26 _setting.width = parseFloat(_setting.width) < 200 ? 200 : parseFloat(_setting.width); 27 return this.each(function () {//初始化 28 AddTemplate(); 29 AddImg(); 30 DisSize(); 31 DisControll(); 32 }) 33 } 34 //添加模版 35 function AddTemplate() { 36 _eleThis.removeClass(); 37 _eleThis.addClass('zd-imgChange'); 38 _eleTemp = '<button class="zd-imgChange-change zd-imgChange-change-left"><</button>'; 39 _eleThis.append(_eleTemp); 40 _eleTemp = ' <div class="zd-imgChange-img"> </div>'; 41 _eleThis.append(_eleTemp); 42 _eleTemp = ' <div class="zd-imgChange-controll"></div>'; 43 _eleThis.append(_eleTemp); 44 _eleTemp = ' <button class="zd-imgChange-change zd-imgChange-change-right">></button>'; 45 _eleThis.append(_eleTemp); 46 //给全局变量赋值 47 _eleImg = $('.zd-imgChange-img'); 48 _eleControll = $('.zd-imgChange-controll'); 49 _eleChange = $('.zd-imgChange-change'); 50 } 51 //添加图片 52 function AddImg() { 53 for (var i = 0; i < _setting.imgs.length; i++) { 54 //图片 55 _eleTemp = $(document.createElement('img')); 56 _eleTemp.addClass('zd-imgChange-img-item'); 57 _eleTemp.attr('src', _setting.imgs[i]); 58 _eleImg.append(_eleTemp); 59 //图标 60 _eleControll.append('<span>' + _icon[1] + '</span>'); 61 //提示 62 $(_eleImg.children('img')[i]).attr({ 'title': _setting.tips[i] + '|' + _setting.links[i] }); 63 $(_eleControll.children('span')[i]).attr('title', _setting.tips[i]); 64 } 65 Dispose(0, 'TtoB'); 66 } 67 //处理尺寸 68 function DisSize() { 69 _eleThis.CSS({ 'height': _setting.height, 'width': _setting.width, 'font-size': _setting.height * 0.2 - 2 }); 70 _eleThis.children('button').css('font-size', _setting.height * 0.2 - 2); 71 _eleChange.css({ 'line-height': _setting.height + 'px' }); 72 } 73 //处理操作事件 74 function DisControll() { 75 _eleImg.children('img').bind('click', function () {//点击图片跳转 76 document.location = 'http://' + $(this).attr('title').split('|')[$(this).attr('title').split('|').length - 1]; 77 }); 78 _eleChange.bind('click', function () {//顺序切换图片 79 var nowImg = $('.zd-imgChange-img-item-sel'); 80 _eleTemp = _eleImg.children('img'); 81 if ($(this).hasClass('zd-imgChange-change-left')) {//向左切换 82 for (var i = 0; i < _eleTemp.length; i++) { 83 if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) { 84 if ((i - 1) < 0) { 85 Dispose(_eleTemp.length - 1, 'RtoL'); 86 } else { 87 Dispose(i - 1, 'RtoL'); 88 } 89 break; 90 } 91 } 92 } else if ($(this).hasClass('zd-imgChange-change-right')) {//向右切换 93 for (var i = 0; i < _eleTemp.length; i++) { 94 if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) { 95 if ((i + 1) > _eleTemp.length - 1) { 96 Dispose(0, 'LtoR'); 97 } else { 98 Dispose(i + 1, 'LtoR'); 99 }100 break;101 }102 }103 } else {104 return false;105 }106 });107 _eleControll.children('span').bind('click', function () {108 for (var i = 0; i < _eleControll.children('span').length; i++) {109 if ($(_eleControll.children('span')[i]).attr('title') == $(this).attr('title')) {110 if ($(_eleImg.children('img')[i]).attr('src') != $('.zd-imgChange-img-item-sel').attr('src')) {//判断是否点击的同一个标签111 Dispose(i, 'TtoB');112 }113 break;114 }115 }116 });117 }118 //切换器119 function Dispose(eNum, dir) {//切换图片 120 clearTimeout(_timers);121 DisposeAnm();122 $(_eleControll.children('span')).html(_icon[1]);123 $(_eleControll.children('span')[eNum]).html(_icon[0]);124 $('.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'));125 $('.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'));126 _timers = setTimeout(Timers, _setting.timers);127 //切换动画--根据z-index实现视觉效果128 function DisposeAnm() {129 $('.zd-imgChange-img-item').removeClass('zd-imgChange-img-item-temp');130 $('.zd-imgChange-img-item-sel').removeClass('zd-imgChange-img-item-sel').addClass('zd-imgChange-img-item-temp');131 _eleTemp = $(_eleImg.children('img')[eNum]).addClass('zd-imgChange-img-item-sel');132 if (dir == 'TtoB') {133 _eleTemp.css('top', -_setting.height);134 _eleTemp.animate({ top: 0 }, 300);135 } else if (dir == 'RtoL') {136 _eleTemp.css('left', _setting.width);137 _eleTemp.animate({ left: 0 }, 300);138 } else if (dir == 'LtoR') {139 _eleTemp.css('left', -_setting.width);140 _eleTemp.animate({ left: 0 }, 300);141 }142 }143 }144 //自动切换时钟145 function Timers() {146 _timers = setTimeout(Timers, _setting.timers);147 var nowImg = $('.zd-imgChange-img-item-sel');148 _eleTemp = _eleImg.children('img');149 for (var i = 0; i < _eleTemp.length; i++) {150 if (nowImg.attr('title') == $(_eleTemp[i]).attr('title')) {151 if ((i - 1) < 0) {152 Dispose(_eleTemp.length - 1, 'TtoB');153
新闻热点
疑难解答
