完美兼容各大瀏覽器的jQuery插件實(shí)現(xiàn)圖片切換特效
更新時(shí)間：2014年12月12日 11:25:55 投稿：hebedich
網(wǎng)友zoeDylan寫的原創(chuàng)jquery插件，實(shí)現(xiàn)了圖片輪播功能，jquery插件名稱為zoeDylan.ImgChange，圖片路徑、跳轉(zhuǎn)鏈接、提示標(biāo)題都是有動(dòng)態(tài)數(shù)組來配置，jquery插件可靈活配置6個(gè)參數(shù)， height高、width寬、mgs圖片地址、links點(diǎn)擊地址、tips圖片說明、timers自動(dòng)切換時(shí)間，
文件里面的功能注釋也寫得非常詳細(xì)(詳見zoeDylan.ImgChange-1.0.1.js文件)，對(duì)網(wǎng)友們的學(xué)習(xí)是很有幫助的，雖然樣式不太好看，大家可以自己寫，好好利用哦。。。
JS代碼部分：
復(fù)制代碼 代碼如下:
(function ($) {
var//申明全局變量
_eleTemp,//緩存變量
_eleThis = $(this),//當(dāng)前元素
_eleImg = $('.zd-imgChange-img'),//圖片組元素
_eleControll = $('.zd-imgChange-controll'),//控制器組元素
_eleChange = $('.zd-imgChange-change'),//切換元素
_icon = '●○',//動(dòng)態(tài)圖標(biāo)
_imgTemplate = $(document.createElement('img')),//圖片模版'
_setting = {
height: 100,//高
width: 200,//寬
imgs: new Array(),//圖片地址
links: null,//點(diǎn)擊地址
tips: null,//圖片說明
timers: 3000//自動(dòng)切換時(shí)間
},//配置
_timers = null//自動(dòng)切換保存變量
$.fn.zoeDylan_ImageChange = function (op) {
_eleThis = $(this);
_setting = $.extend(_setting, op);//設(shè)置屬性
//處理數(shù)據(jù)(查看是否為合法范圍)
_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);
//圖標(biāo)
_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 () {//點(diǎn)擊圖片跳轉(zhuǎn)
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')) {//判斷是否點(diǎn)擊的同一個(gè)標(biāo)簽
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);
//切換動(dòng)畫--根據(jù)z-index實(shí)現(xiàn)視覺效果
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);
}
}
}
//自動(dòng)切換時(shí)鐘
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代碼部分：
復(fù)制代碼 代碼如下:
.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代碼部分：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns=" <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(//點(diǎn)擊圖片跳轉(zhuǎn)的網(wǎng)址
'www.baidu.com',
'www.qq.com',
'www.google.com',
'www.zol.com'
),
a_tips = new Array(//鼠標(biāo)?？康奶崾?br /> '百度',
'騰訊',
'谷歌',
'中關(guān)村'
);
$(function () {
$('#imgc').zoeDylan_ImageChange({//設(shè)置
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=" </div>
<div class="zd-imgChange-controll"><span>d</></div>
<span class="zd-imgChange-change zd-imgChange-change-right">></span>-->
</div>
</body>
</html>
ps:盡量使用高版本瀏覽器，目測(cè)測(cè)試瀏覽器：IE11 IE10 IE6 google 獵豹 歐鵬 可以完美運(yùn)行，IE6透明效果有損失
代碼下載：http://xiazai.jb51.net/201412/yuanma/zeodylanimgchange(jb51.net).rar
您可能感興趣的文章:
- jquery實(shí)現(xiàn)圖片切換代碼
- 完美JQuery圖片切換效果的簡(jiǎn)單實(shí)現(xiàn)
- 基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
- 基于jquery實(shí)現(xiàn)鼠標(biāo)滾輪驅(qū)動(dòng)的圖片切換效果
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery插件Slider Revolution實(shí)現(xiàn)響應(yīng)動(dòng)畫滑動(dòng)圖片切換效果
- jquery簡(jiǎn)單實(shí)現(xiàn)圖片切換效果的方法
- jquery圖片切換實(shí)例分析
- jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
- jquery簡(jiǎn)單圖片切換顯示效果實(shí)現(xiàn)方法
- 基于jQuery實(shí)現(xiàn)的幻燈圖片切換
相關(guān)文章
jQuery中驗(yàn)證表單提交方式及序列化表單內(nèi)容的實(shí)現(xiàn)
之前項(xiàng)目中使用的表單提交方式，使用form()方法可以將提交事件脫離submit按鈕，綁定到任何事件中，下面有個(gè)不錯(cuò)的示例大家可以參考下2014-01-01
jQuery基本選擇器(實(shí)例及表單域value的獲取方法)
下面小編就為大家?guī)硪黄猨Query基本選擇器(實(shí)例及表單域value的獲取方法)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)左右無縫輪播圖的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了TinyMCE漢化及本地上傳圖片功能實(shí)例詳解的相關(guān)資料,由于我們下載下拉的是英文版，需要先漢化，比較簡(jiǎn)單，需要的朋友可以參考下2016-05-05
簡(jiǎn)單分析javascript面向?qū)ο笈c原型
為了說明 JavaScript 是一門徹底的面向?qū)ο蟮恼Z言，首先有必要從面向?qū)ο蟮母拍钪?, 探討一下面向?qū)ο笾械膸讉€(gè)概念：1.一切事物皆對(duì)象，2.對(duì)象具有封裝和繼承特性，3.對(duì)象與對(duì)象之間使用消息通信，各自存在信息隱藏2015-05-05
這篇文章主要介紹了jquery實(shí)現(xiàn)華麗的可折角廣告代碼,涉及jquery鼠標(biāo)hover事件動(dòng)態(tài)操作頁面元素樣式的技巧,可用于頁面增加廣告的視覺效果,需要的朋友可以參考下2015-09-09
jQuery extend 的簡(jiǎn)單實(shí)例
這篇文章介紹了jQuery extend 的簡(jiǎn)單實(shí)例，有需要的朋友可以可以參考一下2013-09-09
jQuery使用Selectator插件實(shí)現(xiàn)多選下拉列表過濾框(附源碼下載)
Selectator是一款實(shí)現(xiàn)多選和搜索過濾功能的jQuery下拉列表框插件。下文給大家介紹jQuery使用Selectator插件實(shí)現(xiàn)多選下拉列表過濾框，需要的朋友一起學(xué)習(xí)吧2016-04-04
jQuery+json實(shí)現(xiàn)的簡(jiǎn)易Ajax調(diào)用實(shí)例
這篇文章主要介紹了jQuery+json實(shí)現(xiàn)的簡(jiǎn)易Ajax調(diào)用,結(jié)合實(shí)例形式分析了jQuery基于ajax實(shí)現(xiàn)json傳參調(diào)用的技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jquery圖片滾動(dòng)放大效果，功能實(shí)現(xiàn)非常簡(jiǎn)單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08