zoeDylan.ImgChange 图片切换插件

墨芈深夜发布插件——图片切换 附上下载地址：http://pan.baidu.com/s/17kKF3共享天地/【墨芈 插件】zoeDylan Plugins

Code

JS

 (function ($) {
     var//申明全局变量
         _eleTemp,//缓存变量
         _eleThis = $(this),//当前元素
         _eleImg = $('.zd-imgChange-img'),//图片组元素
         _eleControll = $('.zd-imgChange-controll'),//控制器组元素
         _eleChange = $('.zd-imgChange-change'),//切换元素
             _icon = '●○',//动态图标
             _imgTemplate = $(document.createElement('img')),//图片模版'
             _setting = {
                 height: 100,//高
                 width: 200,//宽
                 imgs: new Array(),//图片地址
                 links: null,//点击地址
                 tips: null,//图片说明
                 timers: 3000//自动切换时间
             },//配置
             _timers = null//自动切换保存变量
     $.fn.zoeDylan_ImageChange = function (op) {

         _eleThis = $(this);
         _setting = $.extend(_setting, op);//设置属性
         //处理数据(查看是否为合法范围)
         _setting.timers = _setting.timers != null && _setting.timers != undefined && _setting.timers > 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 = '<button class="zd-imgChange-change zd-imgChange-change-left"><</button>';
         _eleThis.append(_eleTemp);
         _eleTemp = '     <div class="zd-imgChange-img">   </div>';
         _eleThis.append(_eleTemp);
         _eleTemp = '       <div class="zd-imgChange-controll"></div>';
         _eleThis.append(_eleTemp);
         _eleTemp = ' <button class="zd-imgChange-change zd-imgChange-change-right">></button>';
         _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('<span>' + _icon[1] + '</span>');
             //提示
             $(_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;
             }
         }
     }

 })($)

JS代码部分

CSS

 .zd-imgChange {
     position: relative;
     margin: auto;
     padding: 0px;
     min-width: 200px;
     min-height: 100px;
     background: rgba(0,0,0,0.5);
     color: #fff;
     cursor: pointer;
     overflow: hidden;
 }

 .zd-imgChange-change {
     cursor:pointer;
     color:#fff;
     margin: 0px;
     padding: 0px;
     position: relative;
     background: rgba(0,0,0,0.5);
     width: 10%;
     height: 100%;
     text-align: center;
     opacity: 0.1;
     z-index:;
     -moz-transition: opacity 0.4s;
     -o-transition: opacity 0.4s;
     -webkit-transition: opacity 0.4s;
     transition: opacity 0.4s;
     border:none;
 }

     .zd-imgChange-change:hover {
         opacity:;
     }

 .zd-imgChange-change-left {
     float: left;
 }

 .zd-imgChange-change-right {
     float: right;
 }

 .zd-imgChange-img {
     z-index:;
     padding: 0px;
     position: absolute;
     top: 0px;
     left: 0px;
     background: rgba(100,0,0,0.1);
     width: 100%;
     height: 100%;
 }

 .zd-imgChange-img-item {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     border: none;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     -moz-transition: opacity 0.5s;
     -o-transition: opacity 0.5s;
     -webkit-transition: opacity 0.5s;
     transition: opacity 0.5s;
     opacity:;
     z-index: -1;
 }
 .zd-imgChange-img-item-temp{
     z-index:;
 }
 .zd-imgChange-img-item-sel {
     z-index:;
 }

 .zd-imgChange-controll {
     z-index:;
     padding: 0px;
     position: absolute;
     bottom: 0px;
     width: 100%;
     height: 20%;
     background: rgba(0,0,0,0);
     text-align: center;
     -moz-transition: background 0.4s;
     -o-transition: background 0.4s;
     -webkit-transition: background 0.4s;
     transition: background 0.4s;
     text-shadow: 0px 0px 5px #000;
     opacity: 0.7;
 }

     .zd-imgChange-controll:hover {
         background: rgba(0,0,0,0.5);
         opacity:;
     }

     .zd-imgChange-controll span {
         -moz-transition: color 0.4s;
         -o-transition: color 0.4s;
         -webkit-transition: color 0.4s;
         transition: color 0.4s;
     }

         .zd-imgChange-controll span:hover {
             color: rgba(0,0,0,0.6);
         }

CSS代码部分

HTML

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta name="viewport" content="width=device-width">
     <title>图片切换</title>
     <script src="jquery-1.10.2.min.js"></script>
     <link href="zoeDylan.ImgChange.css" rel="stylesheet" />
     <script src="zoeDylan.ImgChange.js"></script>
     <script>
             var a_imgs = new Array(//插入图片地址
                 './1 (1).jpg',
                 './1 (2).jpg',
                 './1 (3).jpg',
                 './1 (4).jpg'
                 ),
                 a_links = new Array(//点击图片跳转的网址
                 'www.baidu.com',
                 'www.qq.com',
                 'www.google.com',
                 'www.zol.com'
                 ),
                 a_tips = new Array(//鼠标停靠的提示
                 '百度',
                 '腾讯',
                 '谷歌',
                 '中关村'
                 );
             $(function () {
             $('#imgc').zoeDylan_ImageChange({//设置
                 width: 500,
                 height: 300,
                 imgs: a_imgs,
                 links: a_links,
                 tips: a_tips,
                 timers:2000
             });
             });
     </script>
 </head>
 <body>
     <div id="imgc">
 <!--        <span class="zd-imgChange-change zd-imgChange-change-left"><</span>
         <div class="zd-imgChange-img">
             <img class="zd-imgChange-img-item" src="http://subject.9ria.com/html5game/images/t1f.jpg" alt="图片加载错误!" title="提示" />
         </div>
         <div class="zd-imgChange-controll"><span>d</></div>
         <span class="zd-imgChange-change zd-imgChange-change-right">></span>-->
     </div>
 </body>
 </html>

HTML代码部分

ps:由于夜深了，所以没详细说明，有时间补上，下载插件压缩包可以很轻松查看里面的说明，尽量使用高版本浏览器，目测测试浏览器：IE11 IE10 IE6 google 猎豹 欧鹏 可以完美运行，IE6透明效果有损失