移动端页面滑动轮播

html部分；

<!DOCTYPE HTML>
<html>
<head>
<title>Rundiv</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>

<!--css only use in Demo,you are unnessary to include it-->
<link href='style.css' rel='stylesheet'/>

<style>

/* Rundiv required styles */

#rundiv {
  overflow: hidden;
  visibility: hidden;
  position: absolute;
  width:188px;
  height:200px;
  background:red;
  right:0;
}
.wrap {
  overflow: hidden;
  position: relative;
}
.wrap > div {
  float:left;
  width:100%;
  position: relative;
}
.rundivBar{
    display:none;
}
/* END required styles */

</style>

</head>
<body>



<div id='rundiv'>
  <div class='wrap'>
    <div><b><img src="img/3.jpg" alt="" /></b></div>
    <div><b><img src="img/4.jpg" alt="" /></b></div>
    <div><b><img src="img/5.jpg" alt="" /></b></div>
    <div><b><img src="img/6.jpg" alt="" /></b></div>
    <div><b><img src="img/7.jpg" alt="" /></b></div>
    <div><b><img src="img/3.jpg" alt="" /></b></div>
    <div><b><img src="img/4.jpg" alt="" /></b></div>
    <div><b><img src="img/5.jpg" alt="" /></b></div>
    <div><b><img src="img/6.jpg" alt="" /></b></div>
    <div><b><img src="img/7.jpg" alt="" /></b></div>
  </div>
</div>



<div class="rundivBar">
 
  <button onclick='rundiv.prev()'>prev</button>
  <button onclick='rundiv.next()'>next</button>
  <button onclick='alert(rundiv.getPage())' >getpage</button>
  <button onclick='alert(rundiv.getNumSlides())' >sum of Slide</button>
  <ol id="rundivNav">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ol>
</div>



<script src='Rundiv.min.js'></script>
<script>

// pure JS

var elem = document.getElementById('rundiv');
window.rundiv = Rundiv(elem, {
   hasNav:true,
   startSlide: 1,
   auto: 4000,
   continuous: true,
  // disableScroll: true,
  // stopPropagation: true,
  // callback: function(index, element) {},
  // transitionEnd: function(index, element) {}
});
rundiv.linkNav("rundivNav");    //the id of the ol or ul (if you use this,please make sure hasNav:true)    


// with jQuery
// window.rundiv = $('#rundiv').Rundiv().data('Rundiv');

</script>
</body>
</html>

css部分

*{
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
body {
  -webkit-text-size-adjust:none;
  font-family:sans-serif;

  position:relative;
}
/*h1 {
  font-size:33px;
  margin:50px 0 15px;
  text-align:center;
  color:#212121;
}
h2 {
  font-size:14px;
  font-weight:bold;
  color:#3c3c3c;
  margin:20px 10px 10px;
}*/
small {
  margin:0 10px 30px;
  display:block;
  font-size:12px;
}
a {
  margin:0 0 0 10px;
  font-size:12px;
  color:#3c3c3c;
}


html, body {
  background: #f3f3f3;
}

.rundivBar{
  padding-top: 20px;
  text-align: center;
}

.rundivBar button{
  border: 1px solid #000;
  padding: 4px;
}

.rundivBar #rundivNav li{
  display: inline-block;
  background: #444;
  width: 20px;
  color: #fff;
}
.rundivBar #rundivNav .active{
  background: #980;
}

#rundiv div b {
  display:block;
  font-weight:bold;
  color:#14ADE5;
  font-size:20px;
  /*text-align:center;*/
/*  margin-right:10px;*/
  /*padding:100px 10px;*/
 width:178px;
    height:296px;
  box-shadow: 0 1px #EBEBEB;
  background: #fff;
  border-radius: 3px;
  border: 1px solid blue;
  /*border-color: #E5E5E5 #D3D3D3 #B9C1C6;*/
}
#rundiv div b img{
    width:178px;
    height:296px;
    /*border:1px solid red;*/
}
需要引用Rundiv.min.js