分享几个图片上下滑动或左右滑动的代码
左右滑动代码：
<section style="line-height: normal; border: none; margin: 1em auto; text-align: center;"> <section style="padding: 10px; box-shadow: rgb(234 229 229) 0px 0px 2px 2px; overflow: hidden; margin-right: 5px; margin-left: 5px;"> <section style="white-space: nowrap; overflow-x: scroll;overflow-y: hidden;"> <section style="display: inline-block;"> <a target="_blank" title="" href="/"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 26em; border: 1px solid rgb(255, 255, 255);" /> </a> </section> <section style="display: inline-block;"> <a target="_blank" title="" href="/"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 26em; border: 1px solid rgb(255, 255, 255);" /> </a> </section> <section style="display: inline-block;"> <a target="_blank" title="" href="/"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 26em; border: 1px solid rgb(255, 255, 255);" /> </a> </section> <section style="display: inline-block;"> <a target="_blank" title="" href="/"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 26em; border: 1px solid rgb(255, 255, 255);" /> </a> </section> <section style="display: inline-block;"> <a target="_blank" title="" href="/"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 26em; border: 1px solid rgb(255, 255, 255);" /> </a> </section> </section> </section> </section>
或
<section style="pointer-events:painted;width: 100%;font-size: 0;text-align: justify;background-color: #f5f5f5;border: 1px solid rgb(239 238 238);"> <section style="display: inline-block;width: 100%;vertical-align: top;overflow-x: overlay;-webkit-tap-highlight-color: transparent;user-select: none;"> <section style="overflow: hidden;width: 150%;max-width: 150% !important;white-space: nowrap;font-size: 0;line-height: 0;"> <section style="display: inline-block;vertical-align: top;width: 20%;margin-left: 1px;"> <svg style="pointer-events: none;display:inline-block;width: 100%;vertical-align: top;cr:ipb;background-size: cover;background-repeat: no-repeat;background-image: url("http://canet.zhanque.net/static/bb/images/bbrcw.gif");-webkit-tap-highlight-color: transparent;user-select: none;" viewbox="0 0 680 360"> <a href="http://canet.zhanque.net/static/bb/images/bbrcw.gif" title="图1" data-linktype="2"> <rect style="pointer-events: painted;" width="680" height="360" x="0" y="0" fill="transparent"></rect> </a> </svg> </section> <section style="display: inline-block;vertical-align: top;width: 20%;margin-left: 1px;"> <svg style="pointer-events: none;display:inline-block;width: 100%;vertical-align: top;cr:ipb;background-size: cover;background-repeat: no-repeat;background-image: url("http://canet.zhanque.net/static/bb/images/bbrcw.gif");-webkit-tap-highlight-color: transparent;user-select: none;" viewbox="0 0 680 360"> <a href="http://canet.zhanque.net/static/bb/images/bbrcw.gif" title="图2" data-linktype="2"> <rect style="pointer-events: painted;" width="680" height="360" x="0" y="0" fill="transparent"></rect> </a> </svg> </section> <section style="display: inline-block;vertical-align: top;width: 20%;margin-left: 1px;"> <svg style="pointer-events: none;display:inline-block;width: 100%;vertical-align: top;cr:ipb;background-size: cover;background-repeat: no-repeat;background-image: url("http://canet.zhanque.net/static/bb/images/bbrcw.gif");-webkit-tap-highlight-color: transparent;user-select: none;" viewbox="0 0 680 360"> <a href="http://canet.zhanque.net/static/bb/images/bbrcw.gif" title="图3" data-linktype="2"> <rect style="pointer-events: painted;" width="680" height="360" x="0" y="0" fill="transparent"></rect> </a> </svg> </section> <section style="display: inline-block;vertical-align: top;width: 20%;margin-left: 1px;"> <svg style="pointer-events: none;display:inline-block;width: 100%;vertical-align: top;cr:ipb;background-size: cover;background-repeat: no-repeat;background-image: url("http://canet.zhanque.net/static/bb/images/bbrcw.gif");-webkit-tap-highlight-color: transparent;user-select: none;" viewbox="0 0 680 360"> <a href="http://canet.zhanque.net/static/bb/images/bbrcw.gif" title="图4" data-linktype="2"> <rect style="pointer-events: painted;" width="680" height="360" x="0" y="0" fill="transparent"></rect> </a> </svg> </section> <section style="display: inline-block;vertical-align: top;width: 20%;margin-left: 1px;"> <svg style="pointer-events: none;display:inline-block;width: 100%;vertical-align: top;cr:ipb;background-size: cover;background-repeat: no-repeat;background-image: url("http://canet.zhanque.net/static/bb/images/bbrcw.gif");-webkit-tap-highlight-color: transparent;user-select: none;" viewbox="0 0 680 360"> <a href="http://canet.zhanque.net/static/bb/images/bbrcw.gif" title="图5" data-linktype="2"> <rect style="pointer-events: painted;" width="680" height="360" x="0" y="0" fill="transparent"></rect> </a> </svg> </section> </section> </section> </section>
效果如下：
上下滑动代码：
<article style="border: 0px; margin: 5px auto; width: 50%; float: left;"> <section style="border: 0px;"> <section style="overflow-y: scroll; height: 300px; width: 100%; overflow-x: hidden;text-align: center;"> <p style="vertical-align: top; width: 100%; letter-spacing: 0px;"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 340px; height: 180px;"/> </p> <p style="vertical-align: top; width: 100%; letter-spacing: 0px;"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 340px; height: 180px;"/> </p> <p style="vertical-align: top; width: 100%; letter-spacing: 0px;"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 340px; height: 180px;"/> </p> <p style="vertical-align: top; width: 100%; letter-spacing: 0px;"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 340px; height: 180px;"/> </p> <p style="vertical-align: top; width: 100%; letter-spacing: 0px;"> <img src="http://canet.zhanque.net/static/bb/images/bbrcw.gif" style="width: 340px; height: 180px;"/> </p> </section> <section style="margin: 5px auto; line-height: 30px; font-size: 12px; color: rgb(51, 51, 51); text-align: center;"> <p> 上下滑动查看更多 </p> </section> </section> </article>
效果如下：
