论坛 › 马黑黑教程专版 › 利用scroll实现图片横向翻页功能

马黑黑 发表于 2025-2-12 21:26

利用scroll实现图片横向翻页功能

<style>
        #papa { margin: auto; width: 460px; height: 600px; background: #eee; overflow: hidden; white-space: nowrap; position: relative; }
        #papa img { display: inline; width: 100%; height: 100%; }
</style>

<div id="papa"></div>
<p style="text-align: center">
        <input id="next" type="button" value="翻页" />
        <span id="picMsg"></span>
</p>

<script>
let idx = 0, step = 1; //idx ：图片索引，step ：翻页歩幅
//图片数组
const pics = [
        'https://638183.freep.cn/638183/t24/biu/ji01.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji02.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji03.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji04.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji05.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji06.jpg'
];
//加载图片
for(let j = 0; j < pics.length; j ++) {
        let image = document.createElement('img');
        image.src = pics;
        image.alt = '';
        image.title = '图' + (j + 1);
        papa.appendChild(image);
}
//翻页按钮点击事件
next.onclick = () => {
        papa.scroll({top: 0, left: (idx + step) * 460, behavior: 'smooth'});
        idx += step;
        picMsg.innerText = pics.length + '/' + (idx + 1);
        if(idx === 0 || idx === pics.length - 1 ) step = -step;
};
//页面启动时图片总数和当前图片序号
picMsg.innerText = pics.length + '/1';
</script>

马黑黑 发表于 2025-2-12 21:27

代码

<style>
        #papa { margin: auto; width: 460px; height: 600px; background: #eee; overflow: hidden; white-space: nowrap; position: relative; }
        #papa img { display: inline; width: 100%; height: 100%; }
</style>

<div id="papa"></div>
<p style="text-align: center">
        <input id="next" type="button" value="翻页" />
        <span id="picMsg"></span>
</p>

<script>
let idx = 0, step = 1; //idx ：图片索引，step ：翻页歩幅
//图片数组
const pics = [
        'https://638183.freep.cn/638183/t24/biu/ji01.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji02.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji03.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji04.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji05.jpg',
        'https://638183.freep.cn/638183/t24/biu/ji06.jpg'
];
//加载图片
for(let j = 0; j < pics.length; j ++) {
        let image = document.createElement('img');
        image.src = pics;
        image.alt = '';
        image.title = '图' + (j + 1);
        papa.appendChild(image);
}
//翻页按钮点击事件
next.onclick = () => {
        papa.scroll({top: 0, left: (idx + step) * 460, behavior: 'smooth'});
        idx += step;
        picMsg.innerText = pics.length + '/' + (idx + 1);
        if(idx === 0 || idx === pics.length - 1 ) step = -step;
};
//页面启动时图片总数和当前图片序号
picMsg.innerText = pics.length + '/1';
</script>

马黑黑 发表于 2025-2-12 21:31

与纵向翻页版相比，其实很简单：

CSS部分：容器元素 line-height 可以不要，通过 white-space: nowrap; 属性强制禁止换行；img 标签本来就是 inline 特性，display: inline; 仅是为了确保该属性不被改变；

JS部分：scroll() 方法中，top 和 left 对换一下，top 为 0，left 改用的是容器元素的宽度数值。

红影 发表于 2025-2-12 23:04

原来这样就可以换成左右移动了，真好{:4_187:}

樵歌 发表于 2025-2-13 08:55

原来是翻页，我还以为是可以把人倒置过来呢。

马黑黑 发表于 2025-2-13 12:12

樵歌 发表于 2025-2-13 08:55
原来是翻页，我还以为是可以把人倒置过来呢。

那个简单，关键是有力气

樵歌 发表于 2025-2-13 17:18

马黑黑 发表于 2025-2-13 12:12
那个简单，关键是有力气

不能说不行吧{:4_189:}

马黑黑 发表于 2025-2-13 17:55

樵歌 发表于 2025-2-13 17:18
不能说不行吧

男人不说不行

樵歌 发表于 2025-2-14 12:35

马黑黑 发表于 2025-2-13 17:55
男人不说不行

必须行{:4_189:}

马黑黑 发表于 2025-2-14 13:10

樵歌 发表于 2025-2-14 12:35
必须行

不行也行

樵歌 发表于 2025-2-14 14:42

马黑黑 发表于 2025-2-14 13:10
不行也行

说你很行{:4_189:}

马黑黑 发表于 2025-2-14 20:11

樵歌 发表于 2025-2-14 14:42
说你很行

俺没有开银行的{:4_170:}

樵歌 发表于 2025-2-14 20:59

马黑黑 发表于 2025-2-14 20:11
俺没有开银行的

有挖金矿的{:4_189:}

马黑黑 发表于 2025-2-14 21:23

樵歌 发表于 2025-2-14 20:59
有挖金矿的

金矿的开采私人没有权限

樵歌 发表于 2025-2-15 14:00

马黑黑 发表于 2025-2-14 21:23
金矿的开采私人没有权限

偷偷挖呗{:4_189:}

马黑黑 发表于 2025-2-15 14:05

樵歌 发表于 2025-2-15 14:00
偷偷挖呗

最低判10年

花飞飞 发表于 2025-2-16 20:46

正走完就倒走，无限循环。{:4_173:}

马黑黑 发表于 2025-2-16 21:41

花飞飞 发表于 2025-2-16 20:46
正走完就倒走，无限循环。

{:4_172:}

花飞飞 发表于 2025-2-17 21:09

马黑黑 发表于 2025-2-16 21:41


笑得好欢乐，，十年少。

马黑黑 发表于 2025-2-17 21:37

花飞飞 发表于 2025-2-17 21:09
笑得好欢乐，，十年少。

啊？又少了十年！

查看完整版本: 利用scroll实现图片横向翻页功能