Home > Web Front-end > JS Tutorial > body text

Jquery implements special effects imitating Tencent Entertainment channel focus picture (slideshow)_jquery

WBOY
Release: 2016-05-16 16:10:50
Original
1240 people have browsed it

A plug-in that imitates Tencent Entertainment channel focus picture carousel

ui3g.js

Copy code The code is as follows:

/*
顶部大图滚动
*/
var slide = (function() {
    var quadEaseOut;
    var doc = document;
    var $ = function(s){
        return document.getElementById(s);
    }
    /**
Get the index value, tool class
@param {Element} current current element
@param {Object} obj element collection
**/
    var getIndex = function(current, obj) {
        for (var i=0; i             if (obj[i] == current) {
                return i;
            }
        }
    };
    /**
@param {Element} el target element
**/
    var siblings = function(el) {
        var r = [],
            n = el.parentNode.firstChild;
        for ( ; n; n = n.nextSibling ) {
            if ( n.nodeType === 1 && n !== el ) {
                r.push( n );
            }
        }
        return r;
    };
    /**
​​Set Slide width and height
@param {Element} el Slide element
@param {Number} width Slide width
@param {Number} height Slide height
**/
    var setSlideWH = function(el, width, height) {
        var styleW,
            styleH;
        if (width == '100%') {      // 自适应宽度
            styleW = '100%';
        } else {                    // 定宽
            styleW = width 'px';
        }
        if (height == '100%') {     // 自适应高度
            styleH = '100%';
        } else {                    // 定高
            styleH = height 'px';
        }
        el.style.width = styleW;
        el.style.height = styleH;
    };
    var readStyle = function(obj, name){
        if(obj.style[name]){
            return obj.style[name];
        }else if(obj.currentStyle){
            return obj.currentStyle[name]
        }else if(document.defaultView && document.defaultView.getComputedStyle){
            var d=document.defaultView.getComputedStyle(obj,null);
            return d.getPropertyValue(name)
        }else{
            return null
        }
    };
    var style = {
        setOpacity : function(obj,opacity){
            if(typeof(obj.style.opacity) != 'undefined'){
                obj.style.opacity = opacity;
            }else{
                obj.style.filter = 'Alpha(Opacity=' (opacity*100) ')';
            };
        }
    };
    /* 动画 */
    var extend = {
        /**
                                                                                                                                                                                                                                                                                                 @param {Element} target target element
**/
        fadeIn : function(obj,time){
            if(readStyle(obj, 'display') == 'none'){
                obj.style.display = 'block';
            };
            style.setOpacity(obj,0);
            time = time || 200;
            var opacity = 0,step = time / 20;
            clearTimeout(obj.showT);
            obj.showT = setTimeout(function(){
                if(opacity >= 1) { style.setOpacity(obj,1); return; }
                opacity =1/step;
                style.setOpacity(obj,opacity);
                obj.showT = setTimeout(arguments.callee,20);
            },20);
        },
        /**
Fade elements
             @param {Element} target target element
**/
        fadeOut : function(obj,time){
            time = time || 200;
            style.setOpacity(obj,1);
            var opacity = 1,step = time / 20;
            clearTimeout(obj.showT);
            obj.showT = setTimeout(function(){
                if(opacity <= 0){
                    obj.style.display = 'none';
                    style.setOpacity(obj,0);
                    return;
                };
                opacity -= 1/step;
                obj.showT = setTimeout(arguments.callee,20);
            },20);
        },
        /**
         动画元素
         @param {Element} target 目标元素
         @param {String} key target样式
         @param {Number} start key初始值
         @param {Number} end key结束值
         @param {Number} speed 速度
         @param {Function} endFn 结束时的回调
         @param {String} u 样式单位
        **/
        actPX : function(obj,key,start,end,speed,endFn,u){
          if(typeof(u) == 'undefined'){u = 'px'};
          clearTimeout(obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut']);
          if(start > end){
            speed = - Math.abs(speed);
          }else{
            speed = Math.abs(speed);
          };
          var now = start;
          var length = end - start;
          obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(function(){
            now = speed;
            var space = end - now;
            if(start < end){
              if(space < length/3){
                speed = Math.ceil(space/3);
              };
              if(space <= 0){
                obj[key] = end u;
                if(endFn){endFn()};
                return;
              };
            }else{
              if(space > length/3){
                speed = Math.floor(space/3);
              };
              if(space >= 0){
                obj[key] = end u;
                if(endFn){endFn()};
                return;
              };
            };
            obj[key] = now u;
            obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(arguments.callee,20);
          },20);
        }
    }
    /**
Configuration
**/
    var config = {
        imgData: [],                    // 初使化图片信息
        imgTargetId: '',                // 初使化 Slide 目标 ID
        imgWidth: '100%',               // 初使化图片宽度
        imgHeight: '100%',              // 初使化图片高度
        imgAuto: false,                 // 初使化自动播放
imgInterval: 3000, // Initialization interval
              imgDataLen: 0,                                                                                                                                                                                                                                                                                                                                                                                                 Index: 4, // The index value of the focus
​ ​ _index: 0,
        curImg: 5,
indexShow : 5
};
/**
Generate and insert Slide structure
**/
var buildSlide = function() {
​​​​ //Inject Slide structure
        var panelHtml = $('_slide').getElementsByTagName('ul')[0].innerHTML;
          var aLi = $('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
​​​​ $('_slide').getElementsByTagName('ul')[0].innerHTML = panelHtml panelHtml;
               // Set width and height
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 < 50 ? (boxMoveTo(Math.round(quadEaseOut(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.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;
}
/**
Automatically switch
**/
var b = false, c = false, timerA = null;
var autoSwitch = function() {
          var slideList = $('slide_list').getElementsByTagName('li');
// Traversal trigger
for (var i=0; i // Find the current trigger
If (slideList[i].className == 'cur') {
                               // Get the index of the current trigger
                                                    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){
;                  timerA = setInterval(autoFun, 10000);
                          c = true;
                     }else if(c){
                          c = false;
;                   timerA = setInterval(autoFun, config.imgInterval);
                }
                               //console.log(config.index);                                           run(config.index, !1);                                                          Config.index = 1;
            }
        };
        timerA = setInterval(autoFun, config.imgInterval);
};
/**
Finger incident
**/
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(offset < 0) {
                    run( config.index, !1)
               } else if(offset > 0) {
                   run(--config.index, !0)
               }else{
                    if(evt.target.parentNode.parentNode.className == 'cur'){
                        window.open(evt.target.parentNode.getAttribute('href'), '_blank');
                    }else{
                        return;
                    }
               }
        },false);
        btnL.addEventListener('touchend', function() {run( config.index, !1)}, false)
        btnR.addEventListener('touchend', function() {run(--config.index, !0)}, false)
    };
    return {
        init: function(obj, e) {
            // 获取配置信息
            config.imgData = obj.data;                              // 设置图片信息
            config.imgTargetId = obj.targetId;                      // 设置 Slide 目标 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;                // 设置图片数量
            // 生成 Slide 结构
            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;
                event.stopPropagation();
            }
            $('slide').onmouseout = function(event){
                if (config.imgAuto) {
                    autoSwitch();
                }
                config.index = config.curImg;
                event.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.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);
                            }else{
                                run(this.index-1, !0)
                            }
                            config.curImg = this.index;
                        }
                }
        }
    }
})();

html

复制代码 代码如下:


 

   
 

 
 
 

       
  • 1

  •    
  • 2

  •    
  • 3

  •    
  • 4

  •    
  • 5

  •  


<script><br>           var $ = function(s){<br>                          return document.getElementById(s);<br>                 }<br> //Parameter configuration<br>                slide.init({<br>                                                                                                                                                                                 ’ to ’ never ’s never to pass ’   ’ ’     ’ ’s together out out out out out out out out out out Out out out out out out together elsewhere bility t-Cott t t - between-w-l's, ​ ​ ​ ​ ​                     Height: 390, // Focus height (non -required, adaptive default value) <br>                  auto: true, // Whether to switch automatically (not required, default value is false) <br>                    interval: 5000,    // Switching interval (optional, default value 3000, valid when auto is true) <br>                       targetId: 'slide', // The corresponding focus image ID of html (required) <br>                     data: $('_slide').getElementsByTagName('li').length// Focus map data (required) <br>             });<br>                                                                                           <script>window.onerror=function(){return true;};</script>


The above is the entire jQuery imitation of Tencent Entertainment channel focus picture special effects shared with you. I hope you will like it.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template