移动端多图片滑动

最新推荐文章于 2022-11-03 16:57:36 发布

骑猪耍太极

最新推荐文章于 2022-11-03 16:57:36 发布

阅读量993

点赞数 1

本文链接：https://blog.csdn.net/chengscau/article/details/38564209

版权

最近在做到移动端的网页

有多张图片，怕性能影响不敢使用JS轮播

最后利用了overflow的scroll 横行滚动条来实现滑动

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
</head>
<body>
	 <style type="text/css">
	 	body{
	 		width: 100%;
	 		font-size: 0px;
	 	}
	 	*{
	 		margin: 0;
	 		padding: 0;
	 	}
        #test{
        height: 200px;
        overflow-x: auto;
        overflow-y: hidden;
        font-size: 0px;
        white-space: nowrap;
        }
        .itemi{
            height: 200px;
            display: inline-block;
            border: none;

        }
        </style>
        <div id="test">
            <img class="itemi" src="http://market.scau.edu.cn/files/upload/photos/201408/d5/1407558376_e0b1f.JPG">
            <img class="itemi" src="http://market.scau.edu.cn/files/upload/photos/201408/cc/1407558376_05244.JPG">
            <img class="itemi" src="http://market.scau.edu.cn/files/upload/photos/201408/81/1407558376_fd53b.JPG">
            <img class="itemi" src="http://market.scau.edu.cn/files/upload/photos/201408/58/1407558376_db052.JPG">
            <img class="itemi" src="http://market.scau.edu.cn/files/upload/photos/201408/81/1407558376_fd53b.JPG">
            <img class="itemi" src="http://market.scau.edu.cn/files/upload/photos/201408/58/1407558376_db052.JPG">
            <img class="itemi" src="http://market.scau.edu.cn/files/upload/photos/201408/81/1407558376_fd53b.JPG">
            <img class="itemi" src="http://market.scau.edu.cn/files/upload/photos/201408/58/1407558376_db052.JPG">
        </div>
</body>
</html>

关键代码是

        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;

然后就可以愉快得滑动了

复制上面代码，在谷歌浏览器里打开模拟手机浏览器的功能，就可以滑动了

骑猪耍太极

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端多图片滑动

最近在做到移动端的网页有多张图片，怕性能影响不敢使用JS
复制链接

扫一扫