> 웹 프론트엔드 > JS 튜토리얼 > Jquery는 Tencent Entertainment 채널 포커스 사진을 모방한 특수 효과를 구현합니다(슬라이드쇼)_jquery

Jquery는 Tencent Entertainment 채널 포커스 사진을 모방한 특수 효과를 구현합니다(슬라이드쇼)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
풀어 주다: 2016-05-16 16:10:50
원래의
1333명이 탐색했습니다.

Tencent Entertainment 채널 포커스 사진 캐러셀을 모방한 플러그인

ui3g.js

코드 복사 코드는 다음과 같습니다.

/*
顶文大图滚动
*/
var 슬라이드 = (함수() {
    varquadEaseOut;
    var doc = 문서;
    var $ = 함수{
        return document.getElementById(s);
    }
    /**
인덱스 값 가져오기, 도구 클래스
@param {Element} 현재 현재 요소
@param {Object} obj 요소 컬렉션
**/
    var getIndex = function(현재, obj) {
        for (var i=0; i             if (obj[i] == 현재) {
                돌려주세요;
            }
        }
    };
    /**
@param {Element} 엘 대상 요소
**/
    var 형제 = 함수(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 {숫자} 너비 슬라이드 너비
@param {숫자} 높이 슬라이드 높이
**/
    var setSlideWH = 함수(el, 너비, 높이) {
        var 스타일W,
            스타일H;
        if (width == '100%') {      // 자동 应宽degree
            styleW = '100%';
        } else {                    // 결정
            styleW = 너비 'px';
        }
        if (height == '100%') {     // 自适应높이도
            styleH = '100%';
        } else {                    //정고
            styleH = 높이 'px';
        }
        el.style.width = 스타일W;
        el.style.height = styleH;
    };
    var readStyle = function(obj, 이름){
        if(obj.style[이름]){
            return obj.style[이름];
        }else if(obj.currentStyle){
            return obj.currentStyle[이름]
        }else if(document.defaultView && document.defaultView.getComputeStyle){
            var d=document.defaultView.getCompulatedStyle(obj,null);
            d.getPropertyValue(이름) 반환
        }그밖에{
            null 반환
        }
    };
    var 스타일 = {
        setOpacity : 함수(obj,opacity){
            if(typeof(obj.style.opacity) != '정의되지 않음'){
                obj.style.opacity = 불투명도;
            }그밖에{
                obj.style.filter = 'Alpha(Opacity=' (불투명도*100) ')';
            };
        }
    };
    /* 动画 */
    var 확장 = {
        /**
~ ~                                              @param {Element} 대상 대상 요소
**/
        fadeIn : 함수(obj,time){
            if(readStyle(obj, 'display') == '없음'){
                obj.style.display = '차단';
            };
            style.setOpacity(obj,0);
            시간 = 시간 || 200;
            var 불투명도 = 0, 단계 = 시간 / 20;
            ClearTimeout(obj.showT);
            obj.showT = setTimeout(function(){
                if(opacity >= 1) { style.setOpacity(obj,1); 반품; }
                불투명도 =1/단계;
                style.setOpacity(obj,opacity);
                obj.showT = setTimeout(arguments.callee,20);
            },20);
        },
        /**
페이드 요소
             @param {Element} 대상 대상 요소
**/
        fadeOut : 함수(obj,time){
            시간 = 시간 || 200;
            style.setOpacity(obj,1);
            var 불투명도 = 1, 단계 = 시간 / 20;
            ClearTimeout(obj.showT);
            obj.showT = setTimeout(function(){
                if(불투명도 <= 0){
                    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 : 함수(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 = 시작;
          var 길이 = 끝 - 시작;
          obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(function(){
            지금 = 속도;
            var space = 끝 - 지금;
            if(시작 < 끝){
              if(공백 < 길이/3){
                속도 = Math.ceil(space/3);
              };
              if(space <= 0){
                obj[key] = 끝;
                if(endFn){endFn()};
                반품;
              };
            }그밖에{
              if(공백 > 길이/3){
                속도 = Math.floor(space/3);
              };
              if(space >= 0){
                obj[key] = 끝;
                if(endFn){endFn()};
                반품;
              };
            };
            obj[key] = 이제 u;
            obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(arguments.callee,20);
          },20);
        }
    }
    /**
구성
**/
    var 구성 = {
        imgData: [],                   // 初使化图文信息
        imgTargetId: '',                // 初使化 슬라이드 ID
        imgWidth: '100%',               // 初使化图文宽島
        imgHeight: '100%',              // 初使化图文高島
        imgAuto: false,                 // 初使化自动播放
imgInterval: 3000, // 초기화 간격
              imgDataLen: 0,                                                                                                                                                > > 인덱스: 4, // 포커스의 인덱스 값
​ _index: 0,
        curImg: 5,
indexShow : 5
};
/**
슬라이드 구조 생성 및 삽입
**/
var buildSlide = function() {
​​​​ //슬라이드 구조 삽입
        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 = 함수(t, b, c, d, s) {
        return -c *(t/=d)*(t-2) b;
};
var 이동 = 함수(){
             //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 = 함수(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 > 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;
         }그 외{
               dotN = config.curImg;
}
          dotList[dotN].className = "현재";
          SlideList[config.curImg].getElementsByTagName("p")[0].style.display = 'block';
​​​​ config._index = config.curImg;
}
/**
자동 전환
**/
var b = false, c = false, timeA = null;
var autoSwitch = function() {
          var SlideList = $('slide_list').getElementsByTagName('li');
// 순회 트리거
for (var i=0; i // 현재 트리거를 찾습니다
If (slideList[i].className == 'cur') {
                              // 현재 트리거의 인덱스 가져오기
>             }
}
      var autoFun = function() {
                  if (config.goSwitch) {
config.index = config.index == 0: config.index
만약(!b){
                     b = 참;
~ >                 }
If(config.index == 3 && !c){
;                  타이머A = setInterval(autoFun, 10000);
                         c = 참;
                     }그렇지 않은 경우(c){
                         c = 거짓;
;                   타이머A = setInterval(autoFun, config.imgInterval);
                }
                             //console.log(config.index);                                         run(config.index, !1);                                                 구성.지수 = 1
            }
        };
        타이머A = setInterval(autoFun, config.imgInterval);
};
/**
손가락 사건
**/
var touchFun = 함수(evt){
        var $ = function(o){ return document.querySelector(o)}, $$ = function(o){ return document.querySelectorAll(o)}, touchInfo = {startX:0, endX:0}, 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(오프셋 < 0) {
                    실행( config.index, !1)
               } else if(오프셋 > 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.img높이;      // 사진 높이
            config.imgAuto = obj.auto || config.img자동;            // 设置自动播放
            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;
                실행(config.index, !1)
            }
            btnL.onclick = function(){
                ClearInterval(timerA);
                config.index -= 1;
                실행(config.index, !0)
            }
            $('slide').onmouseover = 함수(이벤트){
                config.index = Math.ceil(Math.abs(parseInt($('_slide').getElementsByTagName('ul')[0].style.left)/slideList[0].offsetWidth));
                ClearInterval(timerA);
                타이머A = null;
                event.stopPropagation();
            }
            $('slide').onmouseout = 함수(이벤트){
                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

复主代码 代码如下:


 

   
 

 
 
 

       
  • 1

  •    
  • 2

  •    
  • 3

  •    
  • 4

  •    
  • 5

  •  



          var $ = 함수{
                        return document.getElementById(s);
                }
//파라미터 구성
               슬라이드.init({
' to ' never 's never to pass '   ' '     ' s together out out out out out out out out out out out out out out out out out out out together other bility t-Cott t t - between-w-l's, ​ ​ ​​                     높이: 390, // 초점 높이(필수 아님, 적응형 기본값)
                 auto: true, // 자동으로 전환할지 여부(필수 아님, 기본값은 false)
                   간격: 5000,    // 전환 간격(선택 사항, 기본값 3000, auto가 true인 경우 유효)
                     targetId: 'slide', // html의 해당 초점 이미지 ID(필수)
                    데이터: $('_slide').getElementsByTagName('li').length// 포커스 맵 데이터(필수)
            });
> <script>window.onerror=function(){return true;};</script>


위 내용은 Tencent Entertainment 채널 포커스 사진 특수 효과의 전체 jQuery 모방입니다. 마음에 드셨으면 좋겠습니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿