Jquery實現仿騰訊娛樂頻道焦點圖(幻燈片)特效_jquery

一個仿騰訊娛樂頻道焦點圖輪播的插件

ui3g.js

複製程式碼 程式碼如下:

/*
頂部大圖捲動
*/
var Slide = (function() {
    varquadEaseOut;
    var doc = 文檔;
    var $ = 函數{
        return document.getElementById(s);
    }
    /**
     取得索引值，工具類別
     @param {Element} current 目前元素
     @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;
    };
    /**
     設定 Slide 寬高
     @param {Element} el Slide 元素
     @param {Number} width Slide 寬度
     @param {Number} height Slide 高度
    **/
    var setSlideWH = 函數(el, 寬度, 高度) {
        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[名稱]){
            return obj.style[姓名];
        }else if(obj.currentStyle){
            返回 obj.currentStyle[姓名]
        }else if(document.defaultView && document.defaultView.getCompulatedStyle){
            var d=document.defaultView.getComputedStyle(obj,null);
            return d.getPropertyValue(name)
        }其他{
            返回 null
        }
    };
    var 樣式 = {
        setOpacity : 函數(obj,不透明度){
            if(typeof(obj.style.opacity) != '未定義'){
                obj.style.opacity = 不透明度;
            }其他{
                obj.style.filter = 'Alpha(Opacity=' (opacity*100) ')';
            };
        }
    };
    /* 動畫 */
    var 擴充 = {
        /**
         漸顯元素
         @param {Element} target 目標元素
        **/
        fadeIn : 函數(obj,時間){
            if(readStyle(obj, 'display') == 'none'){
                obj.style.display = '區塊';
            };
            style.setOpacity(obj,0);
            時間=時間|| 200；
            var 不透明度 = 0,步長 = 時間 / 20;
            clearTimeout(obj.showT);
            obj.showT = setTimeout(function(){
                if(不透明度 >= 1) { style.setOpacity(obj,1);回傳; }
                不透明度=1/步驟；
                style.setOpacity(obj,不透明度);
                obj.showT = setTimeout(arguments.callee,20);
            },20);
        },
        /**
         漸隱元素
         @param {Element} target 目標元素
        **/
        fadeOut : 函數(obj,時間){
            時間=時間|| 200；
            style.setOpacity(obj,1);
            var 不透明度 = 1,步長 = 時間 / 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} target 目標元素
         @param {String} 關鍵目標樣式
         @param {Number} start key初始值
         @param {Number} end key結束值
         @param {Number} 速率
         @param {Function} endFn 結束時的回呼
         @param {String} u 樣式單位
        **/
        actPX : 函數(obj,key,開始,結束,速率,endFn,u){
          if(typeof(u) == '未定義'){u = 'px'};
          clearTimeout(obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut']);
          if(開始>結束){
            速率 = - Math.abs(速率);
          }其他{
            速率 = Math.abs(速率);
          };
          var now = 開始;
          var length = 結束 - 開始;
          obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(function(){
            現在=速率；
            var space = 結束 - 現在;
            if(開始               if(空格                 speed = Math.ceil(space/3);
              };
              if(空格                 obj[key] = end u;
                if(endFn){endFn()};
                返回；
              };
            }其他{
              if(空格>長度/3){
                speed = Math.floor(space/3);
              };
              if(空格 >= 0){
                obj[key] = end u;
                if(endFn){endFn()};
                返回；
              };
            };
            obj[key] = now 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,                  // 初步化圖片數量
        goSwitch: true,                 // 滑鼠停停時切換狀態
        index: 4,                       //專注於指標值
        _index: 0,
        curImg: 5,
        indexShow : 5
    };
    /**
     產生並插入 Slide 結構
    **/
    var buildSlide = function() {
        // 注入 Slide 結構
        var panelHtml  = $('_slide').getElementsByTagName('ul')[0].innerHTML;
        var aLi = $('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
        $('_slide').getElementsByTagName('ul')[0].innerHTML = panelHtml panelHtml;
        // 設定寬高
        setSlideWH($(config.imgTargetId), config.imgWidth, config.imgHeight);
        $('_slide').getElementsByTagName('ul')[0].style.left = '-' aLi[0].offsetWidth * 4 'px';
    };
    quadEaseOut = function (t, b, c, d, s) {
       return -c *(t/=d)*(t-2) b;
    };
    var move = function(){
        //var e = this;
        clearTimeout(config.timer),
config.t     }
    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 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 > 6 ? 1 : (config.index 1);
        slideList[config.curImg].className = 'cur';
        var dotN = 0;
        if(config.index >= 4){
            dotN = config.index - 4;
        }else{
            dotN = config.curImg;
        }
        dotList[dotN].className = "current";
        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 == 5 ?0 : config.index;
                if(!b){
                    b = true;
                    config.index = 0;
                }
                if(config.index == 3 && !c){
                    clearInterval(timerA);
                    timerA = setInterval(autoFun, 10000);
                    c = true;
                }else if(c){
                    c = false;
                    clearInterval(timerA);
                    timerA = setInterval(autoFun, config.imgInterval);
                }
                //console.log(config.index);               
                run(config.index, !1);             
                config.index = 1;
            }
        };
        timerA = setInterval(autoFun, config.imgInterval);
    };
    /**
     手指事件
    **/
    var touchFun = function(evt){
        var $ = function(o){ 回傳 document.querySelector(o)}, $$ = function(o){ 回傳 document.querySelectorAll(o)}, touchInfo = {startX:0, endX:0}, slip = $( '#slide'), btnL = $('#sliderL'), btnR = $('#sliderR');
        Slide.addEventListener('touchstart', function(evt) {
               evt.preventDefault();      
               if(evt.changedTouches.length == 0)  return;
               touchInfo.startX = evt.changedTouches[0].pageX;
        }，假）；
        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(偏移量                     運行（config.index，！1）
               } else if(offset > 0) {
                   運行（--config.index，！0）
               }其他{
                    if(evt.target.parentNode.parentNode.className == 'cur'){
                        window.open(evt.target.parentNode.getAttribute('href'), '_blank');
                    }其他{
                        返回；
                    }
               }
        },假);
        btnL.addEventListener('touchend', function() {run( config.index, !1)}, false)
        btnR.addEventListener('touchend', function() {run(--config.index, !0)}, false)
    };
    返回{
        初始化：函數（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 ||配置.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(){ 
                清除間隔(timerA);
                config.index = 1;
                以（config.index，！1）
            }
            btnL.onclick = function(){
                清除間隔(timerA);
                config.index -= 1;
                以（config.index，！0）
            }
            $('slide').onmouseover = function(event){
                                清除間隔(timerA);
                計時器A = null;
                event.stopPropagation();
            }
            $('slide').onmouseout = function(event){
                if (config.imgAuto) {
                    自動切換();
                }
                config.index = config.curImg;
                event.stopPropagation();
            }
            if(/ipad;/i.test(navigator.userAgent.toLowerCase())){
                touchFun(e);
            }
            // 自動切換
            if (config.imgAuto) {
                自動切換();
            }
               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){
                                運行(this.index-1, !1);
                            }其他{
                                運行(this.index-1, !0)
                            }
                            config.curImg = this.index;
                        }
                }
        }
    }
})();

html

複製程式碼程式碼如下：

 

   

     
• 
         
         

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

  
         
         
  
       

     
• 
         
         

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

  
         
         
  
       

     
• 
         
         

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

  
         
         
  
       

     
• 
         
         

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

  
         
         
  
       

     
• 
         

  
           

  
             
             

  萌妹教你白全身

  
             

  
           

  
             
             

  学我按3穴位变大胸

  
             

  
           

  
             
             

  男人更爱“坏”女人

  
             

  
           

  
              
             

  女神自曝美胸手法

  
             

  
         

  
         
  
       

   

 

 
 
 

   
• 1

   
• 2

   
• 3

   
• 4

   
• 5

 

<script><br />             var $ = function(s){<br />                     return document.getElementById(s);<br />                 }<br />             //參數設定<br />             slide.init({<br />                 //width: 100%,    // 焦點圖寬度（非必須，且預設值自適應)<br />                 height: 390,   // 焦點圖高度（非必須，且預設值自適應）<br />                 auto: true,   // 是否以自動切換（非必須，預設值 false)<br />                 interval: 5000,   //切換間隔時間（且必須，預設值 3000，並在 auto 為 true 時有效)<br />                 targetId: 'slide',  // html 對應的焦點圖 ID（必須）<br />                 data: $('_slide').getElementsByTagName('li').length// 焦點圖資料（必須）<br />             });<br />         </script>
<script>window.onerror=function(){return true;};</script>

以上就是給大家分享的jQuery仿騰訊娛樂頻道焦點圖特效的全部內容，希望大家能夠喜歡。