(一)图片滑动组件 js+HTML5+css3_图片按着滑动多选如何实现组件-CSDN博客

本文链接：https://blog.csdn.net/sang_fei/article/details/43529897

以前一直是做后台开发，后来转前端开发，也只是对对UI 设计后的图片进行代码化，对效果进行机械性能的搬动，俨然一个代码的搬运工，最近我准备深入的研究移动前端开发，希望自己不再是代码的搬运工，加油，谢谢大家。

图片滚动组件静态界面之：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>无标题文档</title>
<style>
body{
	margin:0px;
	padding:0px;
	overflow::hidden;
	background:#333;
	height:100%;
	position:absolute;
	}
#canvas{
	height:100%;
	width:100%;
	overflow:hidden;
	}

	ul,ul{
		list-style-type:none;
		margin:0px;
		padding:0px;
		overflow:hidden;
		}
		li{
		display:-webkit-box;
		  -webkit-box-pack:center;
		-webkit-box-align:center;
		}
</style>
</head>
<body>
	<div id="canvas">
    <ul>
    	<li style="height:568px;-webkit-translate3d(0,0,0);position:absolute;">
        	<img width="320px" src="a/imgs/1.jpg"/>
        </li>
    <li style="height:568px;-webkit-translate3d(320px,0,0);position:absolute;">
        	<img width="320px" src="a/imgs/2.jpg"/>
        </li>
        <li style="height:568px;-webkit-translate3d(0,0,0);position:absolute;">
        	<img width="320px" src="a/imgs/3.jpg"/>
        </li>
    </ul>
    </div>
</body>
</html>

部分css总结：

居中（优先级由高到底）
1.

	li{
	display:table-cell;
	vertical-align:middle;
        }

2.

	li{
		line-height:568px;
		vertical-align:middle;
		}
		li img{
		vertical-align:middle;
		}

3. ul li 显示一排的时候，不用 float 而是用

-webkit-translate3d(0,0,0);

position:absolute;