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 } 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 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta name="viewport" content="width=device-width"> 5 <title>图片切换</title> 6 <script src="jquery-1.10.2.min.js"></script> 7 <link href="zoeDylan.ImgChange.css" rel="stylesheet" /> 8 <script src="zoeDylan.ImgChange.js"></script> 9 <script> 10 var a_imgs = new Array(//插入图片地址 11 './1 (1).jpg', 12 './1 (2).jpg', 13 './1 (3).jpg', 14 './1 (4).jpg' 15 ), 16 a_links = new Array(//点击图片跳转的网址 17 'www.baidu.com', 18 'www.qq.com', 19 'www.google.com', 20 'www.zol.com' 21 ), 22 a_tips = new Array(//鼠标停靠的提示 23 '百度', 24 '腾讯', 25 '谷歌', 26 '中关村' 27 ); 28 $(function () { 29 $('#imgc').zoeDylan_ImageChange({//设置 30 width: 500, 31 height: 300, 32 imgs: a_imgs, 33 links: a_links, 34 tips: a_tips, 35 timers:2000 36 }); 37 }); 38 </script> 39 </head> 40 <body> 41 <div id="imgc"> 42 <!-- <span class="zd-imgChange-change zd-imgChange-change-left"><</span> 43 <div class="zd-imgChange-img"> 44 <img class="zd-imgChange-img-item" src="http://subject.9ria.com/html5game/images/t1f.jpg" alt="图片加载错误!" title="提示" /> 45 </div> 46 <div class="zd-imgChange-controll"><span>d</></div> 47 <span class="zd-imgChange-change zd-imgChange-change-right">></span>--> 48 </div> 49 </body> 50 </html>
ps:由于夜深了，所以没详细说明，有时间补上，下载插件压缩包可以很轻松查看里面的说明，尽量使用高版本浏览器，目测测试浏览器：IE11 IE10 IE6 google 猎豹 欧鹏 可以完美运行，IE6透明效果有损失
