140 lines
2.9 KiB
JavaScript
140 lines
2.9 KiB
JavaScript
//Swiper的API地址是https://www.swiper.com.cn/api/index.html
|
||
//animejs的API地址是https://www.animejs.cn/
|
||
function clock() {
|
||
var myDate = new Date();
|
||
hours = myDate.getHours();
|
||
if (typeof oldhours != "undefined" == false) {
|
||
oldhours = hours;
|
||
change = true
|
||
} else {
|
||
if (oldhours != hours) {
|
||
oldhours = hours;
|
||
change = true
|
||
} else {
|
||
change = false
|
||
}
|
||
}
|
||
if (change) {
|
||
$("#index-banner").removeClass();
|
||
if (hours < 6) {
|
||
$("#index-banner").addClass('night'); //夜 6点前（不包含）
|
||
} else if (hours < 11) {
|
||
$("#index-banner").addClass('morning'); //晨 11点前（不包含）
|
||
} else if (hours < 16) {
|
||
$("#index-banner").addClass('noon'); //午 16点前 （不包含）
|
||
} else if (hours < 19) {
|
||
$("#index-banner").addClass('afternoon'); //昏19点前（不包含）
|
||
} else {
|
||
$("#index-banner").addClass('night'); //夜 19点后
|
||
}
|
||
}
|
||
}
|
||
clock();
|
||
setInterval("clock()", 1000)//每秒检测时间，不需要背景变化可去除
|
||
|
||
var mySwiper = new Swiper('.swiper-container', {
|
||
loop: true,
|
||
centeredSlides: true,
|
||
slidesPerView: 'auto',
|
||
loopedSlides: 3,
|
||
spaceBetween: 42,
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true,
|
||
},
|
||
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
|
||
})
|
||
|
||
for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
|
||
mySwiper.pagination.bullets[i].onmouseover = function() {
|
||
this.click();
|
||
};
|
||
}
|
||
|
||
$('.hoverNext').on('mouseenter', function() {
|
||
next()
|
||
mySwiper.autoplay.stop();
|
||
})
|
||
|
||
function next() {
|
||
mySwiper.slideNext()
|
||
tout = setTimeout(next, 1000)
|
||
}
|
||
|
||
$('.hoverPrev').on('mouseenter', function() {
|
||
prev()
|
||
mySwiper.autoplay.stop();
|
||
})
|
||
|
||
function prev() {
|
||
mySwiper.slidePrev()
|
||
tout = setTimeout(prev, 1000)
|
||
}
|
||
$('.hoverNext,.hoverPrev').on('mouseout', function() {
|
||
clearTimeout(tout);
|
||
mySwiper.autoplay.start();
|
||
})
|
||
|
||
|
||
window.onload = function() {
|
||
var tl = anime.timeline({
|
||
complete: function(anim) {
|
||
mySwiper.autoplay.start();
|
||
mySwiper.params.autoplay.disableOnInteraction = false;
|
||
mySwiper.params.autoplay.delay = 4500;
|
||
}
|
||
});
|
||
tl.add({
|
||
targets: '.txt1',
|
||
easing: 'linear',
|
||
opacity: 1,
|
||
duration: 1500
|
||
}, '+=1000')
|
||
tl.add({
|
||
targets: '.txt2,.banner_m',
|
||
easing: 'linear',
|
||
opacity: 1,
|
||
duration: 1000
|
||
})
|
||
tl.add({
|
||
targets: '.txt1,.txt2',
|
||
easing: 'linear',
|
||
opacity: 0,
|
||
duration: 1500
|
||
}, '+=1000')
|
||
tl.add({
|
||
targets: '.swiper-slide',
|
||
translateX: -mySwiper.virtualSize,
|
||
duration: 1,
|
||
|
||
easing: 'easeInSine'
|
||
}, '-=500')
|
||
tl.add({
|
||
targets: '.swiper-container',
|
||
opacity: 1,
|
||
}, '+=1')
|
||
|
||
tl.add({
|
||
targets: '.swiper-slide',
|
||
translateX: 0,
|
||
duration: 1500,
|
||
easing: 'easeOutQuint',
|
||
complete: function(anim) {
|
||
$('#index-banner .swiper-container').removeClass('animating');
|
||
}
|
||
}, '-=500')
|
||
tl.add({
|
||
targets: '.swiper-button-prev,.swiper-button-next,.swiper-pagination',
|
||
easing: 'linear',
|
||
opacity: 1,
|
||
duration: 300,
|
||
complete: function(anim) {
|
||
$('.hoverAll').remove();
|
||
}
|
||
}, '+=500')
|
||
} |