适合手机的图片轮播图

最新推荐文章于 2021-06-08 16:03:18 发布

Wayne-Lee

最新推荐文章于 2021-06-08 16:03:18 发布

阅读量7k

点赞数

文章标签： javascript jquery 手机脚本图片

本文链接：https://blog.csdn.net/javensblog/article/details/51512650

版权

本文介绍了一种适用于手机的图片轮播图实现方法，通过动态计算图片的同比例高度来适应不同宽度的屏幕。同时，还加入了手机上左右滑动的交互效果。虽然未经多设备测试，但探讨了可能的兼容性问题。

摘要由CSDN通过智能技术生成

最近要用到手机上的图片轮播图，在网上找了一些代码，发现都是写死的宽高，在手机上没法自适应，实在找烦了，就自己动手写了一段脚本，当时是依赖我们强大的jquery的，目前在手动干预滚动后，自动滚动会停止。下面是代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no, address=no">
<meta name="misapplication-tap-highlight" content="no">
<style>
body{margin:0;padding:0;}
.wrapper{
	position:relative;
	width:100%;
	height:1px;
	box-sizing:border-box;
	overflow:hidden;
	margin:0;
	padding:0;
}
.wrapper ul{
	position:absolute;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}
.wrapper li{
	width:100%;
	list-style:none;
	float:left;
	padding:0;
	margin:0;

}
.wrapper li img{
	width:100%;
}
.wrapper .arrow-l{
	position:absolute;
	left:10px;
	z-index:99;
	display:none;
	width:15px;
	height:30px;
	background:rgba(51,51,51,0.3) url(./images/wrapper-arrow.png) no-repeat left center;
}
.wrapper .arrow-r{
	position:absolute;
	right:10px;
	z-index:99;
	width:15px;
	height:30px;
	background:rgba(51,51,51,0.3) url(./images/wr

最低0.47元/天解锁文章

Wayne-Lee

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
适合手机的图片轮播图

最近要用到手机上的图片轮播图，在网上找了一些代码，发现都是写死的宽高，在手机上没法自适应，实在找烦了，就自己动手写了一段脚本，当时是依赖我们强大的jquery的，目前在手动干预滚动后，自动滚动会停止。下面是代码：body{margin:0;padding:0;}.wrapper{ position:relative; width:100%; height:1px; b
复制链接

扫一扫