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.
Apakah pemalam jquery?
Bagaimana untuk mengendalikan json dengan jquery
Bagaimana untuk memadam elemen dalam jquery
Penggunaan kaedah jQuery hover().
jquery melaksanakan kaedah paging
Apakah elemen tersembunyi dalam jquery
Apa yang ditonjolkan dalam jquery
Bagaimana untuk memulakan pemantauan data oracle
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
