Posted in Javascript onDecember 12, 2014
文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦。。。
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; } } } })($)
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: 1; -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: 1; } .zd-imgChange-change-left { float: left; } .zd-imgChange-change-right { float: right; } .zd-imgChange-img { z-index: 0; 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: 1; z-index: -1; } .zd-imgChange-img-item-temp{ z-index:0; } .zd-imgChange-img-item-sel { z-index: 1; } .zd-imgChange-controll { z-index: 2; 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: 1; } .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); }
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>
ps:尽量使用高版本浏览器,目测测试浏览器:IE11 IE10 IE6 google 猎豹 欧鹏 可以完美运行,IE6透明效果有损失
代码下载:http://xiazai.3water.com/201412/yuanma/zeodylanimgchange(3water.com).rar
完美兼容各大浏览器的jQuery插件实现图片切换特效
- Author -
hebedich声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@