html5+css3全屏响应式图片滑动预览代码免费下载

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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录