Jquery achieved the imitation of tencent entertainment channel focus picture of slide effects

  • 2020-05-12 02:12:09
  • OfStack

A copy of tencent entertainment channel focus map rotation plug-in

ui3g.js


/*
Large scroll at the top
*/
var slide = (function() {
    var quadEaseOut;
    var doc = document;
    var $ = function(s){
        return document.getElementById(s);
    }
    /**
     Gets the index value of the utility class
     @param {Element} current The current element
     @param {Object} obj Elements in the collection
    **/
    var getIndex = function(current, obj) {
        for (var i=0; i<obj.length; i++) {
            if (obj[i] == current) {
                return i;
            }
        }
    };
    /**
     @param {Element} el The 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 up the Slide Wide high
     @param {Element} el Slide The element
     @param {Number} width Slide The width of the
     @param {Number} height Slide highly
    **/
    var setSlideWH = function(el, width, height) {
        var styleW,
            styleH;
        if (width == '100%') {      // Adaptive width
            styleW = '100%';
        } else {                    // Fixed width
            styleW = width + 'px';
        }
        if (height == '100%') {     // Adaptive height
            styleH = '100%';
        } else {                    // Fixed high
            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) + ')';
            };
        }
    };
    /* animation */
    var extend = {
        /**
         Fade in element
         @param {Element} target The 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 The 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);
        },
        /**
         Animated elements
         @param {Element} target The target element
         @param {String} key target style
         @param {Number} start key The initial value
         @param {Number} end key The end value
         @param {Number} speed speed
         @param {Function} endFn A callback at the end
         @param {String} u Style unit
        **/
        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: [],                    // Initial rendering of picture information
        imgTargetId: '',                // Early to make the Slide The target ID
        imgWidth: '100%',               // First make the picture width
        imgHeight: '100%',              // Initial rendering of image height
        imgAuto: false,                 // Initial enable automatic playback
        imgInterval: 3000,              // Initial conversion interval time
        imgDataLen: 0,                  // Initial number of images
        goSwitch: true,                 // Switch state when the mouse is hovering
        index: 4,                       // The index value where the focus is
        _index: 0,
        curImg: 5,
        indexShow : 5
    };
    /**
     Generate and insert Slide structure
    **/
    var buildSlide = function() {
        // injection 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 the width of high
        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<config.imgData*2; i++){
                slideList[i].className = '';
                slideList[i].getElementsByTagName("p")[0].style.display = 'none';
                }
            for(var i=0; i<config.imgData; 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;
    }
    /**
     Automatic switch
    **/
    var b = false, c = false, timerA = null;
    var autoSwitch = function() {
        var slideList = $('slide_list').getElementsByTagName('li');
        // Ergodic flip-flop
        for (var i=0; i<config.imgDataLen; i++) {
            // Find the current trigger
            if (slideList[i].className == 'cur') {
                // Gets 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){
                    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);
    };
    /**
     Finger events
    **/
    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) {
            // Get configuration information
            config.imgData = obj.data;                              // Set image information
            config.imgTargetId = obj.targetId;                      // Set up the Slide The target ID
            config.imgWidth = obj.width || config.imgWidth;         // Set image width
            config.imgHeight = obj.height || config.imgHeight;      // Set image height
            config.imgAuto = obj.auto || config.imgAuto;            // Set auto play
            config.imgInterval = obj.interval || config.imgInterval;// Set interval time
            //config.imgDataLen = config.imgData.length;                // Set the number of pictures
            // generate Slide structure
            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);
            }
            // Automatic switch
            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


<div class="slider-container" id="slide" style="width: 100%; height: 480px;">
  <div id="_slide" class="slider-wrap">
    <ul id="slide_list">
      <li bosszone="Jdt">
        <a href="#" class="pic"> <img src="images/demo1.jpg" width="830" height="350" border="0">
        <p class="st_ty"> Chen sicheng kisses tong liya in Northern Ireland The princess was carried off by accident </p>
        </a>
        <div class="slide_Bg"></div>
      </li>
      <li bosszone="Jdt">
        <a href="#" class="pic"> <img src="images/demo2.jpg" width="830" height="350" border="0">
        <p class="st_ty"> Lin chi-ling's crow's feet reappear The man touched his back and hugged him awkwardly </p>
        </a>
        <div class="slide_Bg"></div>
      </li>
      <li  bosszone="Jdt">
        <a href="#" class="pic"> <img src="images/demo3.jpg" width="830" height="350" border="0">
        <p class="st_ty"> Sister hibiscus swings S Slim waist and long legs Molestation reporter: want to pursue me? </p>
        </a>
        <div class="slide_Bg"></div>
      </li>
      <li  bosszone="Jdt">
        <a href="#" title="" class="pic"> <img src="images/demo4.jpg" width="830" height="350" border="0">
        <p class="st_ty"> Liuyan: consume me You will not see it on my breast 1 A flower to </p>
        </a>
        <div class="slide_Bg"></div>
      </li>
      <li>
        <dl>
          <dd id="ad1"  bosszone="jdtAd1">
            <a href="#" class="pic"> <img src="images/89854294.jpg" width="363" height="350" border="0">
            <p class="st_ty"> Cute sister teaches you white body </p>
            </a> </dd>
          <dd id="ad2"  bosszone="jdtAd2">
            <a href="#" class="pic"> <img src="images/90233983.jpg" width="156" height="350" border="0">
            <p class="st_ty"> Learn I press 3 Acupoints enlarge the chest </p>
            </a> </dd>
          <dd id="ad3"  bosszone="jdtAd3">
            <a href="#" class="pic"> <img src="images/89854500.jpg" width="156" height="350" border="0">
            <p class="st_ty"> Men prefer "bad" women </p>
            </a> </dd>
          <dd id="ad4"  bosszone="jdtAd4">
             <a href="#" class="pic"> <img src="images/89858252.jpg" width="156" height="350" border="0">
            <p class="st_ty"> Goddess self exposure breast enhancement technique </p>
            </a> </dd>
        </dl>
        <div class="slide_Bg"></div>
      </li>
    </ul>
  </div>
  <a href="javascript:void(0);" class="slider-btn slider-btn-l" id="sliderL" bosszone="photoPre"></a>
  <a href="javascript:void(0);" class="slider-btn slider-btn-r" id="sliderR" bosszone="photoNext"></a>
  <ul id="focus_dot">
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
<script>
            var $ = function(s){
                    return document.getElementById(s);
                }
            // Parameter configuration
            slide.init({
                //width: 100%,    // Focus map width (optional, default value adaptive)
                height: 390,   // Focus map height (optional, default value adaptive)
                auto: true,   // Whether to switch automatically (not required, default value false )
                interval: 5000,   // Toggle interval time (not required, default 3000 when auto for true Available at the time)
                targetId: 'slide',  // html The corresponding focus diagram ID (must)
                data: $('_slide').getElementsByTagName('li').length// Focus map data (must)
            });
        </script>
<script>window.onerror=function(){return true;};</script>

The above is to share jQuery copy tencent entertainment channel focus picture effects all content, I hope you can like.


Related articles: