jQuery手机滑动切换特效

1、新建html文档。

2、书写hmtl代码。<div id="photo_box"> <div><div> </div></div></div>

3、书写css代码。html, body { height: 100%; background-color多唉捋胝: #F3F3F3; font-size: 1rem; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; word-wrap: break-word; }* { outline: none; box-sizing: border-box; margin: 0; padding: 0; }#photo_box { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; }#photo_box>div { padding: 15px; height: 100vh; position: relative; }#photo_box>div>div { height: 100%; position: relative; }#photo_box>div>div>div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; border-radius: 5px; box-shadow: 0 0 5px #CCC; text-align: center; z-index: 1; }.div1 { padding-top: 9rem; font-size: 6rem; }

4、书写并添加js代码。<script src="js/jquery-3.1.1.min.js"></script><script src="js/photoSwipe.js"></script>

5、代码整体结构。

6、查看效果。需要用鼠标点击拖动。