图片轮播jquery , 支持html5 , 滑动手势， 屏幕大小自适配 ， 横排 竖排图片自适应， 竖排图片居中显示

js 图片轮播

tag : jquery , 支持html5 , 滑动手势， 屏幕大小自适配 ， 横排 竖排图片自适应， 竖排图片居中显示

html 元素：　　　

<div id="hwslider" class="hwslider"> <ul > <li> <img style="width:100%" src="img/1.jpg" > </li> <li> <img src="img/2.jpg" style="width:100%"> </li> <li> <img src="img/3.jpg" style="width:100%"> </li> <li> <img src="img/4.jpg" style="width:100%"> </li> </ul> </div>

引入组件：

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.hwSlider.js"></script>

<link type="text/css" rel="stylesheet" href="css/hwslider.css" />

js 初始化代码：

var sw = screen.width; var sh = sw*0.6; $(function(){ $("#hwslider").hwSlider({ autoPlay: true, arrShow: true, dotShow: false, touch: true, width: sw, height: sh, interval: 9000 }); });