使用方法很简单,先引用JS插件和jQuery库
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/MxSlider.js"></script>
然后调用
<script type="text/javascript">
$(document).ready(function(){
$( '.ZI-slider' ).MxSlider( {
autoPlay: true,
dots: true,
timeSlide: 500
} );
})
</script>
HTML代码示例
<div class="ZI-slider">
<div>
<img src="img/slide1.jpg" alt="" />
<div class="mx-bugs_info">
<a href="#" target="_blank">
这里是图片的文字描述
</a>
</div>
</div>
<div>
<img src="img/slide2.jpg" alt="" />
<div class="mx-bugs_info">
<a href="#" target="_blank">
这里是图片的文字描述
</a>
</div>
</div>
<div>
<img src="img/slide3.jpg" alt="" />
<div class="mx-bugs_info">
<a href="#" target="_blank">
这里是图片的文字描述
</a>
</div>
</div>
</div>