Jquery melaksanakan kesan khas meniru gambar fokus saluran Tencent Entertainment (tayangan slaid)_jquery

Pemalam yang meniru karusel gambar fokus saluran Tencent Entertainment

ui3g.js

Salin kod Kod adalah seperti berikut:

/*
顶部大图滚动
*/
var slaid = (fungsi() {
    var quadEaseOut;
    var doc = dokumen;
    var $ = fungsi{
        kembalikan document.getElementById(s);
    }
    /**
Dapatkan nilai indeks, kelas alat
@param {Element} elemen semasa semasa
@param {Object} koleksi elemen obj
**/
    var getIndex = fungsi(semasa, obj) {
        untuk (var i=0; i             jika (obj[i] == semasa) {
                kembalikan i;
            }
        }
    };
    /**
@param {Elemen} el elemen sasaran
**/
    var adik beradik = function(el) {
        var r = [],
            n = el.parentNode.firstChild;
        untuk ( ; n; n = n.NextSibling ) {
            jika ( n.nodeType === 1 && n !== el ) {
                r.push( n );
            }
        }
        pulangkan r;
    };
    /**
Tetapkan lebar dan ketinggian slaid
@param {Elemen} el Elemen slaid
@param {Nombor} lebar Lebar slaid
@param {Nombor} ketinggian Ketinggian slaid
**/
    var setSlideWH = fungsi(el, lebar, tinggi) {
        var styleW,
            gayaH;
        if (lebar == '100%') {      // 自适应宽度
            styleW = '100%';
        } lain {                    // 定宽
            styleW = lebar 'px';
        }
        jika (tinggi == '100%') {     // 自适应高度
            gayaH = '100%';
        } lain {                     // 定高
            styleH = ketinggian 'px';
        }
        el.style.width = styleW;
        el.style.height = styleH;
    };
    var readStyle = fungsi(obj, nama){
        if(obj.style[nama]){
            kembalikan obj.style[nama];
        } else if(obj.currentStyle){
            kembalikan obj.currentStyle[nama]
        }else if(document.defaultView && document.defaultView.getComputedStyle){
            var d=document.defaultView.getComputedStyle(obj,null);
            kembalikan d.getPropertyValue(nama)
        }lain{
            kembalikan null
        }
    };
    gaya var = {
        setOpacity : function(obj,opacity){
            if(typeof(obj.style.opacity) != 'undefined'){
                obj.style.opacity = kelegapan;
            }lain{
                obj.style.filter = 'Alpha(Opacity=' (opacity*100) ')';
            };
        }
    };
    /* 动画 */
    var extend = {
        /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   @param {Element} elemen sasaran sasaran
**/
        fadeIn : fungsi(obj,masa){
            if(readStyle(obj, 'display') == 'none'){
                obj.style.display = 'sekat';
            };
            style.setOpacity(obj,0);
            masa = masa || 200;
            var kelegapan = 0,langkah = masa / 20;
            clearTimeout(obj.showT);
            obj.showT = setTimeout(function(){
                if(opacity >= 1) { style.setOpacity(obj,1); kembali; }
                kelegapan =1/langkah;
                style.setOpacity(obj,opacity);
                obj.showT = setTimeout(arguments.callee,20);
            },20);
        },
        /**
Elemen pudar
             @param {Element} elemen sasaran sasaran
**/
        fadeOut : fungsi(obj,masa){
            masa = masa || 200;
            style.setOpacity(obj,1);
            var kelegapan = 1,langkah = masa / 20;
            clearTimeout(obj.showT);
            obj.showT = setTimeout(function(){
                jika(kelegapan <= 0){
                    obj.style.display = 'tiada';
                    style.setOpacity(obj,0);
                    kembali;
                };
                kelegapan -= 1/langkah;
                obj.showT = setTimeout(arguments.callee,20);
            },20);
        },
        /**
         动画元素
         @param {Element} sasaran 目标元素
         @param {String} sasaran utama样式
         @param {Nombor} kekunci mula初始值
         @param {Nombor} kekunci tamat结束值
         @param {Nombor} kelajuan 速度
         @param {Fungsi} endFn 结束时的回调
         @param {String} u 样式单位
        **/
        actPX : fungsi(obj,kunci,mula,tamat,laju,endFn,u){
          if(typeof(u) == 'undefined'){u = 'px'};
          clearTimeout(obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut']);
          jika(mula > tamat){
            kelajuan = - Math.abs(kelajuan);
          }lain{
            kelajuan = Math.abs(kelajuan);
          };
          var sekarang = mula;
          panjang var = tamat - mula;
          obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(function(){
            sekarang = laju;
            var space = tamat - sekarang;
            jika(mula < tamat){
              if(ruang < panjang/3){
                kelajuan = Math.ceil(space/3);
              };
              jika(ruang <= 0){
                obj[key] = end u;
                if(endFn){endFn()};
                kembali;
              };
            }lain{
              if(ruang > panjang/3){
                kelajuan = Math.floor(space/3);
              };
              jika(ruang >= 0){
                obj[key] = end u;
                if(endFn){endFn()};
                kembali;
              };
            };
            obj[key] = sekarang u;
            obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(arguments.callee,20);
          },20);
        }
    }
    /**
Konfigurasi
**/
    var config = {
        imgData: [],                     // 初使化图片信息
        imgTargetId: '',                // 初使化 ID Slaid 目标
        imgWidth: '100%',                // 初使化图片宽度
        imgHeight: '100%',              // 初使化图片高度
        imgAuto: palsu,                 // 初使化自动播放
imgInterval: 3000, // Selang permulaan
              imgDataLen: 0,                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         ​ ​ _indeks: 0,
        curImg: 5,
indexShow : 5
};
/**
Hasilkan dan masukkan struktur Slaid
**/
var buildSlide = function() {
​​​​ //Suntikan struktur Slaid
        var panelHtml = $('_slide').getElementsByTagName('ul')[0].innerHTML;
          var aLi = $('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
​​​​ $('_slide').getElementsByTagName('ul')[0].innerHTML = panelHtml panelHtml;
               // Tetapkan lebar dan tinggi
setSlideWH($(config.imgTargetId), config.imgWidth, config.imgHeight);
            $('_slide').getElementsByTagName('ul')[0].style.left = '-' aLi[0].offsetWidth * 4 'px';
};
quadEaseOut = fungsi (t, b, c, d, s) {
        kembali -c *(t/=d)*(t-2) b;
};
var move = function(){
             //var e = ini;
          clearTimeout(config.timer),
config.t < 50 ? (boxMoveTo(Math.round(quadEaseOut(config.t = 3, config.b, config.c, 50))), config.timer=setTimeout(function(){move()}, 30)): boxMoveTo(config.target)
}
var boxMoveTo = fungsi(e){
            $('slide_list').style.left = e "px"
}
//var dotNum = 0;
var d = palsu;
var run = function(e, t){
          var slideList = $('slide_list').getElementsByTagName('li');
         dotList = $("focus_dot").getElementsByTagName('li');
                 slaidList[config._index].className = '';
for(var i=0; i                          senarai slaid[i].Nama kelas = '';
                    slaidList[i].getElementsByTagName("p")[0].style.display = 'none';
                }
for(var i=0; i                         dotList[i].className = '';
                }
e = e < 0 ? config.imgData - 1 : e > config.imgData ? ​​​ 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,
        bergerak();
​​ config.curImg = config.index 1 > 1 : (config.index 1);
          slideList[config.curImg].className = 'cur';
var dotN = 0;
Jika(config.index >= 4){
               dotN = config.index - 4;
         }lain{
               dotN = config.curImg;
}
          dotList[dotN].className = "semasa";
          slideList[config.curImg].getElementsByTagName("p")[0].style.display = 'block';
​​​​ config._index = config.curImg;
}
/**
Tukar secara automatik
**/
var b = palsu, c = palsu, pemasaA = batal;
var autoSwitch = function() {
          var slideList = $('slide_list').getElementsByTagName('li');
// Pencetus traversal
untuk (var i=0; i // Cari pencetus semasa
Jika (slideList[i].className == 'cur') {
                               // Dapatkan indeks pencetus semasa
                                                    config.index = getIndex(slideList[i], slideList);
            }
}
      var autoFun = function() {
                  jika (config.goSwitch) {
Config.index = config.index == 0: config.index; Jika(!b){
                     b = benar;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                }
If(config.index == 3 && !c){
;                  timerA = setInterval(autoFun, 10000);
                          c = benar;
                      }lain jika(c){
                          c = palsu;
;                   timerA = setInterval(autoFun, config.imgInterval);
                }
                               //console.log(config.index);                                           jalankan (config.index, !1);                                                          Config.index = 1;             }
        };
        timerA = setInterval(autoFun, config.imgInterval);
};
/**
Insiden jari
**/
var touchFun = function(evt){
        var $ = function(o){ return document.querySelector(o)}, $$ = function(o){ return document.querySelectorAll(o)}, touchInfo = {startX:0, endX:0}, slaid = $( '#slide'), btnL = $('#sliderL'), btnR = $('#sliderR');
        slide.addEventListener('touchstart', function(evt) {
               evt.preventDefault();      
               if(evt.changedTouches.length == 0)  kembali;
               touchInfo.startX = evt.changedTouches[0].pageX;
        }, palsu);
        slide.addEventListener('touchend', function(evt) {
               evt.preventDefault();
               if(evt.changedTouches.length == 0) kembali;
               touchInfo.endX = evt.changedTouches[0].pageX;
               var offset = touchInfo.endX - touchInfo.startX;
               if(offset < 0) {
                    jalankan( config.index, !1)
               } else if(offset > 0) {
                   jalankan(--config.index, !0)
               }lain{
                    if(evt.target.parentNode.parentNode.className == 'cur'){
                        window.open(evt.target.parentNode.getAttribute('href'), '_blank');
                    }lain{
                        kembali;
                    }
               }
        },palsu);
        btnL.addEventListener('touchend', function() {run( config.index, !1)}, false)
        btnR.addEventListener('touchend', function() {run(--config.index, !0)}, false)
    };
    kembali {
        init: function(obj, e) {
            // 获取配置信息
            config.imgData = obj.data;                              // 设置图片信息
            config.imgTargetId = obj.targetId;                      // 设置 Slaid 目标 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;                // 设置图片数量
            // 生成 Slaid 结构
            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(pemasaA);
                config.index = 1;
                run(config.index, !1)
            }
            btnL.onclick = function(){
                clearInterval(pemasaA);
                config.index -= 1;
                run(config.index, !0)
            }
            $('slide').onmouseover = fungsi(acara){
                config.index = Math.ceil(Math.abs(parseInt($('_slide').getElementsByTagName('ul')[0].style.left)/slideList[0].offsetWidth));
                clearInterval(pemasaA);
                pemasaA = batal;
                event.stopPropagation();
            }
            $('slide').onmouseout = fungsi(acara){
                jika (config.imgAuto) {
                    autoTukar();
                }
                config.index = config.curImg;
                event.stopPropagation();
            }
            if(/ipad;/i.test(navigator.userAgent.toLowerCase())){
                touchFun(e);
            }
            // 自动切换
            jika (config.imgAuto) {
                autoTukar();
            }
               dotList = $("focus_dot").getElementsByTagName('li');
                var n;
                untuk(n = 0; n < dotList.length; 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);
                            }lain{
                                jalankan(this.index-1, !0)
                            }
                            config.curImg = this.index;
                        }
                }
        }
    }
})();

html

复制代码 代码如下:

 

   

     
• 
         
         

  《北爱》陈思诚激吻佟丽娅 公主抱不慎走光

  
         
         
  
       

     
• 
         
         

  林志玲捞金鱼尾纹再现 遭男子摸背熊抱尴尬挤笑

  
         
         
  
       

     
• 
         
         

  芙蓉姐姐大摆S型秀瘦腰长腿 调戏记者：想追求我？

  
         
         
  
       

     
• 
         
         

  柳岩：消费我 你们在我胸前也看不出一朵花来

  
         
         
  
       

     
• 
         

  
           

  
             
             

  萌妹教你白全身

  
             

  
           

  
             
             

  学我按3穴位变大胸

  
             

  
           

  
             
             

  男人更爱“坏”女人

  
             

  
           

  
              
             

  女神自曝美胸手法

  
             

  
         

  
         
  
       

   

 

 
 
 

   
• 1

   
• 2

   
• 3

   
• 4

   
• 5

 

          var $ = fungsi{
                         pulangkan document.getElementById(s);
                }
//Konfigurasi parameter
               slaid.init({
' untuk ' tidak pernah akan berlalu '   ' '     ' bersama-sama keluar keluar keluar keluar keluar keluar keluar keluar bersama-sama di tempat lain bility t-Cott t t - between-w-l's, ​​​​ ​                    Ketinggian: 390, // Ketinggian fokus (tidak diperlukan, nilai lalai penyesuaian)
                 auto: benar, // Sama ada hendak bertukar secara automatik (tidak diperlukan, nilai lalai adalah palsu)
                   selang: 5000,    // Selang penukaran (pilihan, nilai lalai 3000, sah apabila auto adalah benar)
                      targetId: 'slaid', // ID imej fokus yang sepadan bagi html (diperlukan)
                    data: $('_slide').getElementsByTagName('li').length// Data peta fokus (diperlukan)
            });
                                                                                               <script>window.onerror=function(){return true;};</script>

Di atas ialah keseluruhan tiruan jQuery bagi kesan khas gambar fokus saluran Tencent Entertainment yang dikongsikan dengan anda.