完美兼容各大浏览器的jQuery插件实现图片切换特效
完美兼容各大浏览器的jQuery插件实现图片切换特效
发布时间：2016-12-30 来源：查字典编辑
摘要：文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件)，对网友们的学习是很有帮助的，虽然样式不太...

文件里面的功能注释也写得非常详细(详见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><</button>';

_eleThis.append(_eleTemp);

_eleTemp = ' <div> </div>';

_eleThis.append(_eleTemp);

_eleTemp = ' <div></div>';

_eleThis.append(_eleTemp);

_eleTemp = ' <button>></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><</span>

<div>

<img src="http://subject.9ria.com/html5game/images/t1f.jpg" alt="图片加载错误!" title="提示" />

</div>

<div><span>d</></div>

<span>></span>-->

</div>

</body>

</html>

ps:尽量使用高版本浏览器，目测测试浏览器：IE11 IE10 IE6 google 猎豹 欧鹏 可以完美运行，IE6透明效果有损失

代码下载：http://xiazai.jb51.net/201412/yuanma/zeodylanimgchange(jb51.net).rar

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类