主要なブラウザの jQuery プラグインと完全に互換性があり、画像切り替え効果を実現_jquery
jquery
映像切り替え
ファイル内の関数コメントも非常に詳細に記述されており (詳細については 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 = '';
_eleThis.append(_eleTemp);
_eleTemp = '
_eleThis.append(_eleTemp);
_eleTemp = ' ';
_eleThis.append(_eleTemp);
_eleTemp = ' ';
_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('' _icon[1] '');
// 提案
$(_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) Dispose(_eleTemp.length - 1, 'RtoL');
} else {
Dispose(i - 1, 'RtoL');
}
休憩;
}
}
} 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');
}
休憩;
}
}
} else {
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');
}
休憩;
}
}
});
}
//切换器
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('タイトル') : $(_eleControll.children('span')[0]).attr('タイトル'));
_timers = setTimeout(Timers, _setting.timers);
//切换アニメーション画--根据z-index实现視觉效果
関数 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({ トップ: 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);
}
}
}
//自動切换時間钟
関数タイマー() {
_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');
}
休憩;
}
}
}
})($)
CSS代コード部分：
复制代码代码如下:
.zd-imgChange {
位置: 相対;
マージン: 自動;
パディング: 0px;
最小幅: 200px;
最小高さ: 100px;
背景: rgba(0,0,0,0.5);
色: #fff;
カーソル: ポインタ;
オーバーフロー: 非表示;
}
.zd-imgChange-change {
カーソル:ポインタ;
色:#fff;
マージン: 0px;
パディング: 0px;
位置: 相対;
背景: rgba(0,0,0,0.5);
幅: 10%;
高さ: 100%;
text-align: 中央;
不透明度: 0.1;
z インデックス: 1;
-moz-transition: 不透明度 0.4s;
-o-transition: 不透明度 0.4s;
-webkit-transition: 不透明度 0.4 秒;
トランジション: 不透明度 0.4s;
境界線:なし;
}
.zd-imgChange-change:hover {
不透明度: 1;
}
.zd-imgChange-change-left {
float: 左;
}
.zd-imgChange-change-right {
float: 右;
}
.zd-imgChange-img {
z インデックス: 0;
パディング: 0px;
位置: 絶対;
上: 0px;
左: 0px;
背景: rgba(100,0,0,0.1);
幅: 100%;
高さ: 100%;
}
.zd-imgChange-img-item {
位置: 絶対;
上: 0px;
左: 0px;
幅: 100%;
高さ: 100%;
境界線: なし;
-moz-background-size: カバー;
-o-background-size: カバー;
背景サイズ: カバー;
-moz-transition: 不透明度 0.5 秒;
-o-transition: 不透明度 0.5s;
-webkit-transition: 不透明度 0.5 秒;
トランジション: 不透明度 0.5 秒;
不透明度: 1;
z インデックス: -1;
}
.zd-imgChange-img-item-temp{
z-index:0;
}
.zd-imgChange-img-item-sel {
z インデックス: 1;
}
.zd-imgChange-controll {
z インデックス: 2;
パディング: 0px;
位置: 絶対;
下: 0px;
幅: 100%;
高さ: 20%;
背景: rgba(0,0,0,0);
text-align: 中央;
-moz-transition: バックグラウンド 0.4 秒;
-o-transition: バックグラウンド 0.4 秒;
-webkit-transition: バックグラウンド 0.4 秒;
トランジション: バックグラウンド 0.4 秒;
テキストシャドウ: 0px 0px 5px #000;
不透明度: 0.7;
}
.zd-imgChange-controll:hover {
背景: rgba(0,0,0,0.5);
不透明度: 1;
}
.zd-imgChange-controll スパン {
-moz-transition: カラー 0.4 秒;
-o-transition: カラー 0.4 秒;
-webkit-transition: カラー 0.4 秒;
トランジション: カラー 0.4 秒;
}
.zd-imgChange-controll span:hover {
カラー: rgba(0,0,0,0.6);
}
HTML代コード部分：
复制代码代码如下:
http://www.w3.org/1999/xhtml">
<頭>
<スクリプト>
var a_imgs = new Array(//画像アドレスを挿入
‘./1 (1).jpg’,
‘./1 (2).jpg’,
‘./1 (3).jpg’,
「./1 (4).jpg」
)、
A_links = 新しい配列 (// 画像の URL をクリックするとジャンプします
'www.baidu.com',
'www.qq.com',
'www.google.com',
'www.zol.com'
)、
a_tips = new Array(//マウスのドッキングに関するヒント
「百度」、
「テンセント」、
「グーグル」、
「中関村」
);
$(function () {
$('#imgc').zoeDylan_ImageChange({//設定
幅: 500、
高さ: 300、
画像: a_imgs,
リンク: a_links,
ヒント: a_tips、
タイマー:2000
});
});