Un plug-in qui imite le carrousel d'images de la chaîne Tencent Entertainment
ui3g.js
/*
顶部大图滚动
*/
var diapositive = (fonction() {
var quadEaseOut;
var doc = document;
var $ = fonction(s){
retourner document.getElementById(s);
>
/**
Obtenez la valeur de l'index, la classe d'outils
@param {Element} élément actuel actuel
@param {Object} collection d'éléments obj
**/
var getIndex = fonction (actuel, obj) {
pour (var i=0; i
if (obj[i] == actuel) {
reviens-moi ;
>
>
};
/**
@param {Element} l'élément cible
**/
var frères et sœurs = function(el) {
varr = [],
n = el.parentNode.firstChild;
pour ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== el ) {
r.push( n );
>
>
retourner r;
};
/**
Définir la largeur et la hauteur de la diapositive
@param {Element} el Élément Slide
@param {Number} width Largeur de la diapositive
@param {Number} hauteur Hauteur de la diapositive
**/
var setSlideWH = function(el, largeur, hauteur) {
var styleW,
styleH;
if (width == '100%') { // 自适应宽度
styleW = '100%';
} else { // 定宽
styleW = largeur 'px';
>
if (height == '100%') { // 自适应高度
styleH = '100%';
} else { // 定高
styleH = hauteur 'px';
>
el.style.width = styleW;
el.style.height = styleH;
};
var readStyle = function(obj, nom){
if(obj.style[nom]){
return obj.style[nom];
}sinon si(obj.currentStyle){
retourner obj.currentStyle[nom]
}else if(document.defaultView && document.defaultView.getComputedStyle){
var d=document.defaultView.getComputedStyle(obj,null);
return d.getPropertyValue(name)
}autre{
renvoyer null
>
};
var style = {
setOpacity : function(obj,opacity){
if(typeof(obj.style.opacity) != 'indéfini'){
obj.style.opacity = opacité;
}autre{
obj.style.filter = 'Alpha(Opacity=' (opacity*100) ')';
};
>
};
/* 动画 */
var étendre = {
/**
@param {Element} target élément cible
**/
fadeIn : function(obj,time){
if(readStyle(obj, 'display') == 'aucun'){
obj.style.display = 'bloc';
};
style.setOpacity(obj,0);
temps = temps || 200;
var opacité = 0,step = temps / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(opacity >= 1) { style.setOpacity(obj,1); retour; >
opacité =1/étape ;
style.setOpacity(obj,opacity);
obj.showT = setTimeout(arguments.callee,20);
},20);
},
/**
Éléments de fondu
@param {Element} target élément cible
**/
fadeOut : fonction(obj,heure){
temps = temps || 200;
style.setOpacity(obj,1);
var opacité = 1,step = temps / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(opacité <= 0){
obj.style.display = 'aucun';
style.setOpacity(obj,0);
revenir ;
};
opacité -= 1/étape ;
obj.showT = setTimeout(arguments.callee,20);
},20);
},
/**
动画元素
@param {Element} cible 目标元素
@param {String} clé cible样式
@param {Numéro} touche de démarrage初始值
@param {Numéro} clé de fin结束值
@param {Numéro} vitesse 速度
@param {Function} endFn 结束时的回调
@param {String} u 样式单位
**/
actPX : function(obj,key,start,end,speed,endFn,u){
if(typeof(u) == 'indéfini'){u = 'px'};
clearTimeout(obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut']);
si(début > fin){
vitesse = - Math.abs(vitesse);
}autre{
vitesse = Math.abs(vitesse);
};
var maintenant = démarrer;
var longueur = fin - début;
obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(function(){
maintenant = vitesse ;
var space = fin - maintenant;
si (début < fin){
si(espace < longueur/3){
vitesse = Math.ceil(espace/3);
};
si(espace <= 0){
obj[key] = terminer u;
si(endFn){endFn()};
revenir ;
};
}autre{
si (espace > longueur/3){
vitesse = Math.floor(espace/3);
};
si(espace >= 0){
obj[key] = terminer u;
si(endFn){endFn()};
revenir ;
};
};
obj[key] = maintenant u;
obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(arguments.callee,20);
},20);
>
>
/**
Configuration
**/
var configuration = {
imgData : [], // 初使化图片信息
imgTargetId: '', // 初使化 Slide 目标 ID
imgWidth : '100 %', // 初使化图片宽度
imgHauteur : '100 %', // 初使化图片高度
imgAuto : false, // 初使化自动播放
imgInterval : 3000, // Intervalle d'initialisation
imgDataLen : 0,
Index : 4, // La valeur de l'index du focus
_index : 0,
curImg : 5,
indexAfficher : 5
};
/**
Générer et insérer une structure de diapositive
**/
var buildSlide = fonction() {
//Injecter la structure Slide
var panelHtml = $('_slide').getElementsByTagName('ul')[0].innerHTML;
var aLi = $('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
$('_slide').getElementsByTagName('ul')[0].innerHTML = panelHtml panelHtml;
// Définir la largeur et la hauteur
setSlideWH($(config.imgTargetId), config.imgWidth, config.imgHeight);
$('_slide').getElementsByTagName('ul')(0].style.left = '-' aLi[0].offsetWidth * 4 'px';
};
quadEaseOut = fonction (t, b, c, d, s) {
return -c *(t/=d)*(t-2) b;
};
var move = fonction(){
//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 = fonction(e){
$('slide_list').style.left = e "px"
>
//var numéropoint = 0;
var d = faux;
var run = fonction(e, t){
var slideList = $('slide_list').getElementsByTagName('li');
dotList = $("focus_dot").getElementsByTagName('li');
slideList[config._index].className = '';
pour(var i=0; i
slideList[i].className = '';
slideList[i].getElementsByTagName("p")[0].style.display = 'none';
}
pour(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,
move();
config.curImg = config.index 1 > 6 ? 1 : (config.index 1);
slideList[config.curImg].className = 'cur';
var pointN = 0;
Si(config.index >= 4){
dotN = config.index - 4;
}autre{
dotN = config.curImg;
>
dotList[dotN].className = "current";
slideList[config.curImg].getElementsByTagName("p")[0].style.display = 'block';
config._index = config.curImg;
>
/**
Changer automatiquement
**/
var b = faux, c = faux, timerA = null;
var autoSwitch = fonction() {
var slideList = $('slide_list').getElementsByTagName('li');
// Déclencheur de traversée
pour (var i=0; i
// Trouver le déclencheur actuel
Si (slideList[i].className == 'cur') {
// Récupère l'index du déclencheur actuel
config.index = getIndex(slideList[i], slideList);
}
>
var autoFun = function() {
if (config.goSwitch) {
Config.index = config.index == 5? 0 : config.index
Si(!b){
b = vrai ;
config.index = 0;
}
Si(config.index == 3 && !c){
;
timerA = setInterval(autoFun, 10000);
c = vrai ;
}else if(c){
c = faux ;
;
timerA = setInterval(autoFun, config.imgInterval);
}
//console.log(config.index);
run(config.index, !1);
Config.index = 1 ;
}
};
timerA = setInterval(autoFun, config.imgInterval);
};
/**
Incident de doigt
**/
var touchFun = fonction (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;
}, faux);
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;
si (décalage < 0) {
exécuter( config.index, !1)
} sinon if(offset > 0) {
exécuter(--config.index, !0)
}autre{
if(evt.target.parentNode.parentNode.className == 'cur'){
window.open(evt.target.parentNode.getAttribute('href'), '_blank');
}autre{
revenir ;
>
>
},faux);
btnL.addEventListener('touchend', function() {run( config.index, !1)}, false)
btnR.addEventListener('touchend', function() {run(--config.index, !0)}, false)
};
revenir {
init : fonction (obj, e) {
// 获取配置信息
config.imgData = obj.data; // 设置图片信息
config.imgTargetId = obj.targetId; // 设置 Diapositive 目标 ID
config.imgWidth = obj.width || config.imgWidth ; // 设置图片宽度
config.imgHeight = obj.hauteur || 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;
exécuter(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);
minuterieA = null;
event.stopPropagation();
>
$('slide').onmouseout = function(event){
si (config.imgAuto) {
autoSwitch();
>
config.index = config.curImg;
event.stopPropagation();
>
if(/ipad;/i.test(navigator.userAgent.toLowerCase())){
touchFun(e);
>
// 自动切换
si (config.imgAuto) {
autoSwitch();
>
dotList = $("focus_dot").getElementsByTagName('li');
var n;
pour(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;
si(this.index >n){
run(this.index-1, !1);
}autre{
exécuter(this.index-1, !0)
>
config.curImg = this.index;
>
>
>
>
})();
html
<script><br>
var $ = fonction(s){<br>
return document.getElementById(s);<br>
}<br>
//Configuration des paramètres<br>
slide.init({<br>
`` à ne jamais passer '', `` est ensemble
Hauteur : 390, // Hauteur de mise au point (non obligatoire, valeur par défaut adaptative) <br>
auto: true, // S'il faut basculer automatiquement (non obligatoire, la valeur par défaut est false) <br>
intervalle : 5 000, // Intervalle de commutation (facultatif, valeur par défaut 3 000, valable lorsque auto est vrai) <br>
targetId : 'slide', // L'ID de l'image de focus correspondant au format HTML (obligatoire) <br>
données : $('_slide').getElementsByTagName('li').length// Données de la carte de focus (obligatoire) <br>
});<br>
<script>window.onerror=function(){return true;};</script>
Ce qui précède est l'intégralité de l'imitation jQuery des effets spéciaux de l'image de focus de la chaîne Tencent Entertainment partagée avec vous. J'espère que vous l'aimerez.
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Comment utiliser les macros Excel
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
