islider插件写移动端轮播图

CSS：

.iSlider {
  height: 13.0rem;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.iSlider ul {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}
.iSlider li {
  position: absolute;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  list-style: none;
}
.iSlider ul li img{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

.iSlider div{
  background-color: #ffffff;
  padding: 3px;
}

HTML：

<div class="iSlider slider"></div>

JS：

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

var islider = new iSlider({
	data: bannerList,
	dom: document.querySelector(".iSlider"),
	duration: 3000,
	animateType: 'default',
	isAutoplay: true,
	isLooping: true,
	isVertical: false,  //是否垂直滚动
	onslidechange: function(){
		sliderIndex = this.sliderIndex + 1;
		var html = '<div class="message-box">'
		    + '<span class="message fs15 ml10" data-index='+ this.sliderIndex +'>'+ arrTitleList[this.sliderIndex] +'</span>'
		    + '</div>'
		    +'<div class="order-box mr10 fs15">'
		    + '<span class="pic-order fs16">'+ sliderIndex + '</span> / '+ arrTitleList.length+' '
		    +'</div>';
		document.querySelector('#titleBox').innerHTML = html;
	}
});

islider使用拓展： 更多参数的使用讲解