Pemalam yang meniru karusel gambar fokus saluran Tencent Entertainment
ui3g.js
/*
顶部大图滚动
*/
var slaid = (fungsi() {
var quadEaseOut;
var doc = dokumen;
var $ = fungsi{
kembalikan document.getElementById(s);
}
/**
Dapatkan nilai indeks, kelas alat
@param {Element} elemen semasa semasa
@param {Object} koleksi elemen obj
**/
var getIndex = fungsi(semasa, obj) {
untuk (var i=0; i
jika (obj[i] == semasa) {
kembalikan i;
}
}
};
/**
@param {Elemen} el elemen sasaran
**/
var adik beradik = function(el) {
var r = [],
n = el.parentNode.firstChild;
untuk ( ; n; n = n.NextSibling ) {
jika ( n.nodeType === 1 && n !== el ) {
r.push( n );
}
}
pulangkan r;
};
/**
Tetapkan lebar dan ketinggian slaid
@param {Elemen} el Elemen slaid
@param {Nombor} lebar Lebar slaid
@param {Nombor} ketinggian Ketinggian slaid
**/
var setSlideWH = fungsi(el, lebar, tinggi) {
var styleW,
gayaH;
if (lebar == '100%') { // 自适应宽度
styleW = '100%';
} lain { // 定宽
styleW = lebar 'px';
}
jika (tinggi == '100%') { // 自适应高度
gayaH = '100%';
} lain { // 定高
styleH = ketinggian 'px';
}
el.style.width = styleW;
el.style.height = styleH;
};
var readStyle = fungsi(obj, nama){
if(obj.style[nama]){
kembalikan obj.style[nama];
} else if(obj.currentStyle){
kembalikan obj.currentStyle[nama]
}else if(document.defaultView && document.defaultView.getComputedStyle){
var d=document.defaultView.getComputedStyle(obj,null);
kembalikan d.getPropertyValue(nama)
}lain{
kembalikan null
}
};
gaya var = {
setOpacity : function(obj,opacity){
if(typeof(obj.style.opacity) != 'undefined'){
obj.style.opacity = kelegapan;
}lain{
obj.style.filter = 'Alpha(Opacity=' (opacity*100) ')';
};
}
};
/* 动画 */
var extend = {
/**
@param {Element} elemen sasaran sasaran
**/
fadeIn : fungsi(obj,masa){
if(readStyle(obj, 'display') == 'none'){
obj.style.display = 'sekat';
};
style.setOpacity(obj,0);
masa = masa || 200;
var kelegapan = 0,langkah = masa / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(opacity >= 1) { style.setOpacity(obj,1); kembali; }
kelegapan =1/langkah;
style.setOpacity(obj,opacity);
obj.showT = setTimeout(arguments.callee,20);
},20);
},
/**
Elemen pudar
@param {Element} elemen sasaran sasaran
**/
fadeOut : fungsi(obj,masa){
masa = masa || 200;
style.setOpacity(obj,1);
var kelegapan = 1,langkah = masa / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
jika(kelegapan <= 0){
obj.style.display = 'tiada';
style.setOpacity(obj,0);
kembali;
};
kelegapan -= 1/langkah;
obj.showT = setTimeout(arguments.callee,20);
},20);
},
/**
动画元素
@param {Element} sasaran 目标元素
@param {String} sasaran utama样式
@param {Nombor} kekunci mula初始值
@param {Nombor} kekunci tamat结束值
@param {Nombor} kelajuan 速度
@param {Fungsi} endFn 结束时的回调
@param {String} u 样式单位
**/
actPX : fungsi(obj,kunci,mula,tamat,laju,endFn,u){
if(typeof(u) == 'undefined'){u = 'px'};
clearTimeout(obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut']);
jika(mula > tamat){
kelajuan = - Math.abs(kelajuan);
}lain{
kelajuan = Math.abs(kelajuan);
};
var sekarang = mula;
panjang var = tamat - mula;
obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(function(){
sekarang = laju;
var space = tamat - sekarang;
jika(mula < tamat){
if(ruang < panjang/3){
kelajuan = Math.ceil(space/3);
};
jika(ruang <= 0){
obj[key] = end u;
if(endFn){endFn()};
kembali;
};
}lain{
if(ruang > panjang/3){
kelajuan = Math.floor(space/3);
};
jika(ruang >= 0){
obj[key] = end u;
if(endFn){endFn()};
kembali;
};
};
obj[key] = sekarang u;
obj['_extend_actPX' key.replace(/-.=/,'_') '_timeOut'] = setTimeout(arguments.callee,20);
},20);
}
}
/**
Konfigurasi
**/
var config = {
imgData: [], // 初使化图片信息
imgTargetId: '', // 初使化 ID Slaid 目标
imgWidth: '100%', // 初使化图片宽度
imgHeight: '100%', // 初使化图片高度
imgAuto: palsu, // 初使化自动播放
imgInterval: 3000, // Selang permulaan
imgDataLen: 0,
_indeks: 0,
curImg: 5,
indexShow : 5
};
/**
Hasilkan dan masukkan struktur Slaid
**/
var buildSlide = function() {
//Suntikan struktur Slaid
var panelHtml = $('_slide').getElementsByTagName('ul')[0].innerHTML;
var aLi = $('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
$('_slide').getElementsByTagName('ul')[0].innerHTML = panelHtml panelHtml;
// Tetapkan lebar dan tinggi
setSlideWH($(config.imgTargetId), config.imgWidth, config.imgHeight);
$('_slide').getElementsByTagName('ul')[0].style.left = '-' aLi[0].offsetWidth * 4 'px';
};
quadEaseOut = fungsi (t, b, c, d, s) {
kembali -c *(t/=d)*(t-2) b;
};
var move = function(){
//var e = ini;
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 = fungsi(e){
$('slide_list').style.left = e "px"
}
//var dotNum = 0;
var d = palsu;
var run = function(e, t){
var slideList = $('slide_list').getElementsByTagName('li');
dotList = $("focus_dot").getElementsByTagName('li');
slaidList[config._index].className = '';
for(var i=0; i
senarai slaid[i].Nama kelas = '';
slaidList[i].getElementsByTagName("p")[0].style.display = 'none';
}
for(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,
bergerak();
config.curImg = config.index 1 > 1 : (config.index 1);
slideList[config.curImg].className = 'cur';
var dotN = 0;
Jika(config.index >= 4){
dotN = config.index - 4;
}lain{
dotN = config.curImg;
}
dotList[dotN].className = "semasa";
slideList[config.curImg].getElementsByTagName("p")[0].style.display = 'block';
config._index = config.curImg;
}
/**
Tukar secara automatik
**/
var b = palsu, c = palsu, pemasaA = batal;
var autoSwitch = function() {
var slideList = $('slide_list').getElementsByTagName('li');
// Pencetus traversal
untuk (var i=0; i
// Cari pencetus semasa
Jika (slideList[i].className == 'cur') {
// Dapatkan indeks pencetus semasa
config.index = getIndex(slideList[i], slideList);
}
}
var autoFun = function() {
jika (config.goSwitch) {
Config.index = config.index == 0: config.index;
Jika(!b){
b = benar;
}
If(config.index == 3 && !c){
;
timerA = setInterval(autoFun, 10000);
c = benar;
}lain jika(c){
c = palsu;
;
timerA = setInterval(autoFun, config.imgInterval);
}
//console.log(config.index);
jalankan (config.index, !1);
Config.index = 1;
}
};
timerA = setInterval(autoFun, config.imgInterval);
};
/**
Insiden jari
**/
var touchFun = function(evt){
var $ = function(o){ return document.querySelector(o)}, $$ = function(o){ return document.querySelectorAll(o)}, touchInfo = {startX:0, endX:0}, slaid = $( '#slide'), btnL = $('#sliderL'), btnR = $('#sliderR');
slide.addEventListener('touchstart', function(evt) {
evt.preventDefault();
if(evt.changedTouches.length == 0) kembali;
touchInfo.startX = evt.changedTouches[0].pageX;
}, palsu);
slide.addEventListener('touchend', function(evt) {
evt.preventDefault();
if(evt.changedTouches.length == 0) kembali;
touchInfo.endX = evt.changedTouches[0].pageX;
var offset = touchInfo.endX - touchInfo.startX;
if(offset < 0) {
jalankan( config.index, !1)
} else if(offset > 0) {
jalankan(--config.index, !0)
}lain{
if(evt.target.parentNode.parentNode.className == 'cur'){
window.open(evt.target.parentNode.getAttribute('href'), '_blank');
}lain{
kembali;
}
}
},palsu);
btnL.addEventListener('touchend', function() {run( config.index, !1)}, false)
btnR.addEventListener('touchend', function() {run(--config.index, !0)}, false)
};
kembali {
init: function(obj, e) {
// 获取配置信息
config.imgData = obj.data; // 设置图片信息
config.imgTargetId = obj.targetId; // 设置 Slaid 目标 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; // 设置图片数量
// 生成 Slaid 结构
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(pemasaA);
config.index = 1;
run(config.index, !1)
}
btnL.onclick = function(){
clearInterval(pemasaA);
config.index -= 1;
run(config.index, !0)
}
$('slide').onmouseover = fungsi(acara){
config.index = Math.ceil(Math.abs(parseInt($('_slide').getElementsByTagName('ul')[0].style.left)/slideList[0].offsetWidth));
clearInterval(pemasaA);
pemasaA = batal;
event.stopPropagation();
}
$('slide').onmouseout = fungsi(acara){
jika (config.imgAuto) {
autoTukar();
}
config.index = config.curImg;
event.stopPropagation();
}
if(/ipad;/i.test(navigator.userAgent.toLowerCase())){
touchFun(e);
}
// 自动切换
jika (config.imgAuto) {
autoTukar();
}
dotList = $("focus_dot").getElementsByTagName('li');
var n;
untuk(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);
}lain{
jalankan(this.index-1, !0)
}
config.curImg = this.index;
}
}
}
}
})();
html
var $ = fungsi{
pulangkan document.getElementById(s);
}
//Konfigurasi parameter
slaid.init({
' untuk ' tidak pernah akan berlalu ' ' ' ' bersama-sama keluar keluar keluar keluar keluar keluar keluar keluar bersama-sama di tempat lain bility t-Cott t t - between-w-l's,
Ketinggian: 390, // Ketinggian fokus (tidak diperlukan, nilai lalai penyesuaian)
auto: benar, // Sama ada hendak bertukar secara automatik (tidak diperlukan, nilai lalai adalah palsu)
selang: 5000, // Selang penukaran (pilihan, nilai lalai 3000, sah apabila auto adalah benar)
targetId: 'slaid', // ID imej fokus yang sepadan bagi html (diperlukan)
data: $('_slide').getElementsByTagName('li').length// Data peta fokus (diperlukan)
});
<script>window.onerror=function(){return true;};</script>
Di atas ialah keseluruhan tiruan jQuery bagi kesan khas gambar fokus saluran Tencent Entertainment yang dikongsikan dengan anda.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
