html5+css3全屏响应式图片滑动预览代码,左右箭头按钮控制图片水平滑动轮播,鼠标悬停图片还有好看的文字和按钮动画特效。
js代码
<script src="js/polyfill.min.js"></script>
<script>
let hero = document.getElementById('hero-slides');
let menu = document.getElementById('menu');
let slides = document.getElementById('slides');
let next = [ 'next', 'next-catch' ].map(n => document.getElementById(n));
let prev = [ 'prev', 'prev-catch' ].map(n => document.getElementById(n));
let slideChildren = slides.children;
let slideCount = slides.children.length;
let currentlyDemoing = false;
let currentPage = 0;
let slidesPerPage = () => window.innerWidth > 1700 ? 4 : window.innerWidth > 1200 ? 3 : 2;
let maxPageCount = () => slideCount / slidesPerPage() - 1;
function goToPage(pageNumber = 0) {
currentPage = Math.min(maxPageCount(), Math.max(0, pageNumber));
console.log(currentPage);
hero.style.setProperty('--page', currentPage);
}
function sleep(time) {
return new Promise(res => setTimeout(res, time));
}
function hoverSlide(index) {
index in slideChildren &&
slideChildren[index].classList.add('hover');
}
function unhoverSlide(index) {
index in slideChildren &&
slideChildren[index].classList.remove('hover');
}
async function demo() {
if(currentlyDemoing) {
return;
}
currentlyDemoing = true;
if(currentPage !== 0) {
goToPage(0);
await sleep(800);
}
let slides = slidesPerPage();
let pageSeq_ = { 2: [ 1, 2, 1 ], 3: [ 1, 2, 1 / 3 ], 4: [ 1, 1, 0 ] };
let pageSeq = pageSeq_[slides] || pageSeq_[4];
let slideSeq_ = { 2: [ 2, 4, 3 ], 3: [ 3, 6, 2 ], 4: [ 3, 6, 2 ] };
let slideSeq = slideSeq_[slides] || slideSeq_[2];
await sleep(300);
goToPage(pageSeq[0]);
await sleep(500);
hoverSlide(slideSeq[0]);
await sleep(1200);
goToPage(pageSeq[1]);
unhoverSlide(slideSeq[0]);
await sleep(500);
hoverSlide(slideSeq[1]);
await sleep(1200);
goToPage(pageSeq[2]);
unhoverSlide(slideSeq[1]);
await sleep(300);
hoverSlide(slideSeq[2]);
await sleep(1600);
goToPage(0);
unhoverSlide(slideSeq[2]);
currentlyDemoing = false;
}
next.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage + 1)));
prev.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage - 1)));
menu.addEventListener('click', demo);
sleep(100).then(demo);
// window.addEventListener('resize', () => {
// console.log(document.body.style.getPropertyValue('--slide-per-page'));
// });</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791