コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

Jquery は Tencent Entertainment チャンネルのフォーカス画像 (スライドショー) を模倣した特殊効果を実装します_jquery

WBOY
リリース： 2016-05-16 16:10:50
オリジナル
1236 人が閲覧しました

Tencent Entertainment チャンネルのフォーカス画像カルーセルを模倣するプラグイン

ui3g.js

コードをコピー コードは次のとおりです:

/*
顶部大图滚動
*/
var slide = (function() {
    varquadEaseOut;
    var doc = ドキュメント;
    var $ = 関数{
        return document.getElementById(s);
    }
    /**
ツールクラス
のインデックス値を取得します @param {Element} 現在の現在の要素
@param {Object} obj 要素コレクション
**/
    var getIndex = function(current, obj) {
        for (var i=0; i             if (obj[i] == 現在) {
                私を返します;
            }
        }
    };
    /**
@param {Element} el ターゲット要素
**/
    var兄弟 = function(el) {
        var r = [],
            n = el.parentNode.firstChild;
        for ( ; n; n = n.nextSibling ) {
            if ( n.nodeType === 1 && n !== el ) {
                r.push( n );
            }
        }
        r を返します;
    };
    /**
スライドの幅と高さを設定します
@param {Element} el スライド要素
@param {数値} width スライド幅
@param {数値} の高さ スライドの高さ
**/
    var setSlideWH = function(el, width, height) {
        var styleW、
            スタイルH;
        if (width == '100%') { // 自适应宽度
            styleW = '100%';
        } else { // 定宽
            styleW = 幅 'px';
        }
        if (height == '100%') { // 自适应高さ
            styleH = '100%';
        } else { // 定高
            styleH = 高さ 'px';
        }
        el.style.width = styleW;
        el.style.height = styleH;
    };
    var readStyle = function(obj, name){
        if(obj.style[名前]){
            obj.style[名前]を返します;
        }else if(obj.currentStyle){
            obj.currentStyle[名前]
を返します         }else if(document.defaultView && document.defaultView.getComputedStyle){
            var d=document.defaultView.getComputedStyle(obj,null);
            return d.getPropertyValue(name)
        }その他{
            null を返す         }
    };
    var スタイル = {
        setOpacity : function(obj,opacity){
            if(typeof(obj.style.opacity) != '未定義'){
                obj.style.opacity = 不透明度;
            }その他{
                obj.style.filter = 'Alpha(Opacity=' (不透明度*100) ')';
            };
        }
    };
    /* アニメーション */
    var extend = {
        /**
                                                                                                                                                                                                                                                                                    @param {Element} ターゲット ターゲット要素
**/
        fadeIn : function(obj,time){
            if(readStyle(obj, 'display') == 'none'){
                obj.style.display = 'ブロック';
            };
            style.setOpacity(obj,0);
            時間 = 時間 || 200;
            var opacity = 0,step = time / 20;
            clearTimeout(obj.showT);
            obj.showT = setTimeout(function(){
                if(不透明度 >= 1) { style.setOpacity(obj,1);戻る; }
                不透明度 =1/ステップ;
                style.setOpacity(obj,opacity);
                obj.showT = setTimeout(arguments.callee,20);
            },20);
        }、
        /**
フェード要素
@param {Element} ターゲット ターゲット要素
**/
        fadeOut : function(obj,time){
            時間 = 時間 || 200;
            style.setOpacity(obj,1);
            var opacity = 1,step = 時間 / 20;
            clearTimeout(obj.showT);
            obj.showT = setTimeout(function(){
                if(不透明度                     obj.style.display = 'なし';
                    style.setOpacity(obj,0);
                    戻る;
                };
                不透明度 -= 1/ステップ;
                obj.showT = setTimeout(arguments.callee,20);
            },20);
        }、
        /**
         アニメ元素
         @param {Element} ターゲット目标元素
         @param {String} キーターゲット样式
         @param {Number} 開始キー初期值
         @param {Number} 終了キー结束值
         @param {Number} 速度
         @param {関数} endFn 終了時の回调
         @param {String} u 样式单位
        **/
        actPX : function(obj,key,start,end,speed,endFn,u){
          if(typeof(u) == '未定義'){u = 'px'};
          clearTimeout(obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut']);
          if(開始 > 終了){
            速度 = - Math.abs(速度);
          }その他{
            速度 = Math.abs(速度);
          };
          var now = start;
          var length = 終了 - 開始;
          obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(function(){
            今 = 速度;
            var space = 終了 - 今;
            if(開始 < 終了){
              if(スペース < 長さ/3){
                速度 = Math.ceil(space/3);
              };
              if(スペース <= 0){
                obj[key] = end u;
                if(endFn){endFn()};
                戻る;
              };
            }その他{
              if(スペース > 長さ/3){
                速度 = Math.floor(space/3);
              };
              if(スペース >= 0){
                obj[key] = end u;
                if(endFn){endFn()};
                戻る;
              };
            };
            obj[key] = 今、u;
            obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(arguments.callee,20);
          },20);
        }
    }
    /**
構成
**/
    var config = {
        imgData: [], // 初使用化图片情報
        imgTargetId: '', // 初使用化スライド目标ID
        imgWidth: '100%', // 初使用化图片宽度
        imgHeight: '100%', // 初使用化图片の高さ
        imgAuto: false, // 初使用化自アニメーション播放
imgInterval: 3000, // 初期化間隔
imgdatalen：0、                                                                                                                                                                                                                                           Index: 4, // フォーカスのインデックス値
_index: 0,
curImg: 5,
インデックス表示 : 5
};
/**
スライド構造を生成して挿入
**/
var buildSlide = function() {
//スライド構造を挿入
var paneHtml = $('_slide').getElementsByTagName('ul')[0].innerHTML;
var aLi = $('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
$('_slide').getElementsByTagName('ul')[0].innerHTML = パネルHtml パネルHtml;
// 幅と高さを設定します
setSlideWH($(config.imgTargetId), config.imgWidth, config.imgHeight);
$('_slide').getElementsByTagName('ul')[0].style.left = '-' aLi[0].offsetWidth * 4 'px';
};
quadEaseOut = 関数 (t、b、c、d、s) {
return -c *(t/=d)*(t-2) b;
};
var move = function(){
//var e = this;
clearTimeout(config.timer),
config.t < 50 ? (boxMoveTo(Math.round(config.t = 3, config.b, config.c, 50)))、config.timer=setTimeout(function(){move()}, 30)): boxMoveTo(config.target)
}
var boxMoveTo = function(e){
$('slide_list').style.left = e "px"
}
//var dotNum = 0;
var d = false;
var run = function(e, t){
var slideList = $('slide_list').getElementsByTagName('li');
dotList = $("focus_dot").getElementsByTagName('li');
slideList[config._index].className = '';
for(var i=0; i slideList[i].className = '';
slideList[i].getElementsByTagName("p")[0].style.display = 'none';
}
for(var i=0; i dotList[i].className = '';
}
e = e < 0 ? config.imgData 1 : e,
config.target = -Math.abs(slideList[0].offsetWidth)*(config.index = e),
config.t = 0,
config.b = t ? config.target - slideList[0].offsetWidth : config.target slideList[0].offsetWidth,
config.c = config.target - config.b,
move();
config.curImg = config.index 1 > 1 : (config.index 1);
slideList[config.curImg].className = 'cur';
var dotN = 0;
If(config.index >= 4){
dotN = config.index - 4;
}その他{
dotN = config.curImg;
}
dotList[dotN].className = "現在";
slideList[config.curImg].getElementsByTagName("p")[0].style.display = 'block';
config._index = config.curImg;
}
/**
自動的に切り替わります
**/
var b = false、c = false、timerA = null;
var autoSwitch = function() {
var slideList = $('slide_list').getElementsByTagName('li');
// トラバーサルトリガー
for (var i=0; i // 現在のトリガーを検索します
If (slideList[i].className == 'cur') {
// 現在のトリガーのインデックスを取得します
config.index = getIndex(slideList[i], slideList);
}
}
var autoFun = function() {
if (config.goSwitch) {
config.index = config.index == 0: config.index; If(!b){
b = true;
config.index = 0; }
If(config.index == 3 && !c){
; timerA = setInterval(autoFun, 10000);
c = true;
}else if(c){
c = false;
; timerA = setInterval(autoFun, config.imgInterval);
}
//console.log(config.index); run(config.index, !1); 構成インデックス = 1; }
};
timerA = setInterval(autoFun, config.imgInterval);
};
/**
指事件
**/
var touchFun = function(evt){
        var $ = function(o){ return document.querySelector(o)}, $$ = function(o){ return document.querySelectorAll(o)}, touchInfo = {startX:0, endX:0}, slide = $( '#slide')、btnL = $('#sliderL')、btnR = $('#sliderR');
        slide.addEventListener('touchstart', function(evt) {
               evt.preventDefault();      
               if(evt.changedTouches.length == 0) return;
               touchInfo.startX = evt.changedTouches[0].pageX;
        }, false);
        slide.addEventListener('touchend', function(evt) {
               evt.preventDefault();
               if(evt.changedTouches.length == 0) return;
               touchInfo.endX = evt.changedTouches[0].pageX;
               var offset = touchInfo.endX - touchInfo.startX;
               if(オフセット                     run(config.index, !1)
               } else if(オフセット > 0) {
                   run(--config.index, !0)
               }その他{
                    if(evt.target.parentNode.parentNode.className == 'cur'){
                        window.open(evt.target.parentNode.getAttribute('href'), '_blank');
                    }その他{
                        戻る;
                    }
               }
        },false);
        btnL.addEventListener('touchend', function() {run( config.index, !1)}, false)
        btnR.addEventListener('touchend', function() {run(--config.index, !0)}, false)
    };
    戻り値 {
        init: function(obj, e) {
            // 获取構成情報
            config.imgData = obj.data;                              // 設置画像情報
            config.imgTargetId = obj.targetId;                      // スライド目标IDを設定
            config.imgWidth = obj.width || config.imgWidth;         // 配置画像宽度
            config.imgHeight = obj.height || config.imgHeight;      // 配置画像の高さ
            config.imgAuto = obj.auto || config.imgAuto;            // 設置自動播放
            config.imgInterval = obj.interval || config.imgInterval;// 設置間隔時間
            //config.imgDataLen = config.imgData.length;                // 配置写真数
            // スライド结构
を生成             buildSlide();
            var slideList = $('slide_list').getElementsByTagName('li');
            $('slide_list').style.width = slideList[0].offsetWidth*slideList.length 'px';
            slideList[config.curImg].className = 'cur';
            var btnL = $('sliderL')、btnR = $('sliderR')、btnClose = $('slidClosed');
            btnR.onclick = function(){
                clearInterval(timerA);
                config.index = 1;
                run(config.index, !1)
            }
            btnL.onclick = function(){
                clearInterval(timerA);
                config.index -= 1;
                run(config.index, !0)
            }
            $('slide').onmouseover = function(event){
                config.index = Math.ceil(Math.abs(parseInt($('_slide').getElementsByTagName('ul')[0].style.left)/slideList[0].offsetWidth));
                clearInterval(timerA);
                timerA = null;
                イベント.stopPropagation();
            }
            $('slide').onmouseout = function(event){
                if (config.imgAuto) {
                    autoSwitch();
                }
                config.index = config.curImg;
                イベント.stopPropagation();
            }
            if(/ipad;/i.test(navigator.userAgent.toLowerCase())){
                touchFun(e);
            }
            // 自動切换
            if (config.imgAuto) {
                autoSwitch();
            }
               dotList = $("focus_dot").getElementsByTagName('li');
                var n;
                for(n = 0; n                         dotList[n].index = n;
                        dotList[n].onclick = function() {
                            if(config.curImg == this.index || config.curImg == this.index 5) return;
                            var n = 0;
                            n = config.curImg > 4? 0 : config.curImg;
                            if(this.index > n){
                                run(this.index-1, !1);
                            }その他{
                                run(this.index-1, !0)
                            }
                            config.curImg = this.index;
                        }
                }
        }
    }
})();

html

复制代码代码如下:


 

   
 

 
 
 

       
  • 1

    •    
  • 2

    •    
  • 3

    •    
  • 4

    •    
  • 5

    •  


<スクリプト>
var $ = 関数{
return document.getElementById(s);
}
//パラメータ設定
slide.init({
'to' never 's never pass」​                     Height: 390, // フォーカスの高さ (必須ではない、適応型のデフォルト値)
auto: true, // 自動的に切り替えるかどうか (必須ではありません、デフォルト値は false)
Interval: 5000, // 切り替え間隔 (オプション、デフォルト値 3000、auto が true の場合に有効)
targetId: 'slide', // HTML の対応するフォーカス画像 ID (必須)
data: $('_slide').getElementsByTagName('li').length// フォーカス マップ データ (必須)
});
                                                                                          <script>window.onerror=function(){return true;};</script>


上記は、Tencent Entertainment チャンネルのフォーカス画像の特殊効果を jQuery で模倣したものです。気に入っていただければ幸いです。
関連ラベル：
jquery スライドショー フォーカスマップ
ソース：php.cn
前の記事：社会保障のpayment_node.jsを計算するためにnodeJSコードを使用するのは適切ですか? 次の記事：マウス移動時に大きな画像を表示するメソッドをjQueryで実装_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート