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使用拓展: 更多参数的使用讲解