墨芈深夜发布插件——图片切换 附上下载地址：共享天地/【墨芈 插件】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 = ''; 39 _eleThis.append(_eleTemp); 40 _eleTemp = ' '; 41 _eleThis.append(_eleTemp); 42 _eleTemp = ' '; 43 _eleThis.append(_eleTemp); 44 _eleTemp = ' '; 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('' + _icon[1] + ''); 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 } else {154 Dispose(i - 1, 'TtoB');155 }156 break;157 }158 }159 }160 161 })($)
CSS
1 .zd-imgChange { 2 position: relative; 3 margin: auto; 4 padding: 0px; 5 min-width: 200px; 6 min-height: 100px; 7 background: rgba(0,0,0,0.5); 8 color: #fff; 9 cursor: pointer; 10 overflow: hidden; 11 } 12 13 .zd-imgChange-change { 14 cursor:pointer; 15 color:#fff; 16 margin: 0px; 17 padding: 0px; 18 position: relative; 19 background: rgba(0,0,0,0.5); 20 width: 10%; 21 height: 100%; 22 text-align: center; 23 opacity: 0.1; 24 z-index: 1; 25 -moz-transition: opacity 0.4s; 26 -o-transition: opacity 0.4s; 27 -webkit-transition: opacity 0.4s; 28 transition: opacity 0.4s; 29 border:none; 30 } 31 32 .zd-imgChange-change:hover { 33 opacity: 1; 34 } 35 36 .zd-imgChange-change-left { 37 float: left; 38 } 39 40 .zd-imgChange-change-right { 41 float: right; 42 } 43 44 .zd-imgChange-img { 45 z-index: 0; 46 padding: 0px; 47 position: absolute; 48 top: 0px; 49 left: 0px; 50 background: rgba(100,0,0,0.1); 51 width: 100%; 52 height: 100%; 53 } 54 55 .zd-imgChange-img-item { 56 position: absolute; 57 top: 0px; 58 left: 0px; 59 width: 100%; 60 height: 100%; 61 border: none; 62 -moz-background-size: cover; 63 -o-background-size: cover; 64 background-size: cover; 65 -moz-transition: opacity 0.5s; 66 -o-transition: opacity 0.5s; 67 -webkit-transition: opacity 0.5s; 68 transition: opacity 0.5s; 69 opacity: 1; 70 z-index: -1; 71 } 72 .zd-imgChange-img-item-temp{ 73 z-index:0; 74 } 75 .zd-imgChange-img-item-sel { 76 z-index: 1; 77 } 78 79 .zd-imgChange-controll { 80 z-index: 2; 81 padding: 0px; 82 position: absolute; 83 bottom: 0px; 84 width: 100%; 85 height: 20%; 86 background: rgba(0,0,0,0); 87 text-align: center; 88 -moz-transition: background 0.4s; 89 -o-transition: background 0.4s; 90 -webkit-transition: background 0.4s; 91 transition: background 0.4s; 92 text-shadow: 0px 0px 5px #000; 93 opacity: 0.7; 94 } 95 96 .zd-imgChange-controll:hover { 97 background: rgba(0,0,0,0.5); 98 opacity: 1; 99 }100 101 .zd-imgChange-controll span {102 -moz-transition: color 0.4s;103 -o-transition: color 0.4s;104 -webkit-transition: color 0.4s;105 transition: color 0.4s;106 }107 108 .zd-imgChange-controll span:hover {109 color: rgba(0,0,0,0.6);110 }
HTML
1 2 3 4 5图片切换 6 7 8 9 39 40 4142 4849 50
ps:由于夜深了，所以没详细说明，有时间补上，下载插件压缩包可以很轻松查看里面的说明，尽量使用高版本浏览器，目测测试浏览器：IE11 IE10 IE6 google 猎豹 欧鹏 可以完美运行，IE6透明效果有损失