zoeDylan.ImgChange 图片切换插件

8/31/2015来源:CSS教程人气:824

zoeDylan.ImgChange 图片切换插件

墨芈深夜发布插件——图片切换 附上下载地址: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