最近要用到手机上的图片轮播图,在网上找了一些代码,发现都是写死的宽高,在手机上没法自适应,实在找烦了,就自己动手写了一段脚本,当时是依赖我们强大的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