图片滑入页面html,html5+css3全屏响应式图片滑动预览代码

灰太狼 2023-10-04 16:04 22阅读 0赞

html5+css3全屏响应式图片滑动预览代码，左右箭头按钮控制图片水平滑动轮播，鼠标悬停图片还有好看的文字和按钮动画特效。

![cd94bfdceb31f4269b2d14a06ef1e247.png][]

查看演示

下载资源：

45

次 下载资源

下载积分：

20

积分

js代码

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'));

// \});

[cd94bfdceb31f4269b2d14a06ef1e247.png]: https://img-blog.csdnimg.cn/img_convert/cd94bfdceb31f4269b2d14a06ef1e247.png

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关图片滑入页面html,html5+css3全屏响应式图片滑动预览代码

html5+css3全屏响应式图片滑动预览代码，左右箭头按钮控制图片水平滑动轮播，鼠标悬停图片还有好看的文字和按钮动画特效。 ![cd94bfdceb31f4269b2d14

灰太狼/ 2023年10月04日 16:04/ 0 赞/ 23 阅读

相关 vant 图片预览

使用vant/vue --ts图片预览实现效果 ![在这里插入图片描述][2021010615194537.gif_pic_center] vant ui

ゝ一纸荒年。/ 2023年01月03日 01:20/ 0 赞/ 572 阅读

相关单图片预览

implementation 'cn.bingoogolapple:bga-photopicker:1.2.8@aar' implementation

一时失言乱红尘/ 2022年08月29日 15:55/ 0 赞/ 454 阅读

相关 CSS3图片响应式居中

img { width: 100%; object-fit: cover; } img {

叁歲伎倆/ 2022年07月16日 00:16/ 0 赞/ 298 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 531 阅读

相关【HTML5】响应式图片

　　jq width() 、height()获取的是图片加载到页面上的图片显示尺寸（图片标签width、height属性值或max-width后的值）而非图片真实尺寸；所以虽然

谁借莪１个温暖的怀抱￠/ 2022年06月05日 08:55/ 0 赞/ 302 阅读

相关 HTML5 响应式图片

响应式图片的核心目的只写一遍代码，就能适用所有设备。（img 标签等价于 image 标签） 1、通过 srcset 切换分辨率（1）通过分辨率切换

末蓝、/ 2022年05月27日 01:52/ 0 赞/ 258 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 749 阅读

相关 uniapp预览图片

一、需求最近有一个留言板需求，留言之后需要展示留言信息，信息里面除了文字还有图片。点击图片，可预览图片。就用到了 uniapp 预览图片的功能：u

以你之姓@/ 2021年09月03日 05:51/ 0 赞/ 1327 阅读

相关 vue中实现图片全屏缩放预览

基于photoswipe的vue图片全屏缩放预览插件：vue-photo-preview 说明 1.简化了photoswipe的默认设置 2.取消了图片需设定尺寸的

女爷i/ 2021年07月25日 21:20/ 0 赞/ 804 阅读