图片轮播插件slideBox

转载地址:http://www.ido321.com/852.html

 说明：兼容ie8,firfox,chrome

使用说明

1,引入js

<script type="text/javascript" src="<%=path%>/assets/js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="<%=path%>/assets/js/jquery.slideBox.min.js"></script>

2,css引入

<link rel="stylesheet" type="text/css" href="<%=path%>/assets/css/jquery.slideBox.css" />

3,body中内容

<div style="float:left;margin-top:0px;" class="slideBox" id="demo4">

 

  <ul class="items">

    <li><a href="javascript:void(0)" title=""><img src="<%=path%>/assets/images/picStore/first.png" width="480px" height="260px"></a></li>

    <li><a href="javascript:void(0)" title=""><img src="<%=path%>/assets/images/picStore/second.png" width="480px" height="260px"></a></li>

    <li><a href="javascript:void(0)" title=""><img src="<%=path%>/assets/images/picStore/three.png" width="480px" height="260px"></a></li>

    <li><a href="javascript:void(0)" title=""><img src="<%=path%>/assets/images/picStore/fourth.png" width="480px" height="260px"></a></li>

  </ul>

 

4，js

 

<script type="text/javascript">

$(document).ready(function(){

//启动滚动图片

$('#demo4').slideBox({

hideBottomBar : false//隐藏底栏

});

});

 

效果地址:http://slidebox.sinaapp.com/