jquery轮播图有很多,这个是类似淘宝、京东首页轮播图的一种
第一步,下载文件jquery-1.5.2.js、jquery.smallslider.js 、smallslider.css
第二步,准备几个需要显示的图片
第三步,新建jsp页面
js代码块:
$(document).ready(function(){
$('#exp1').smallslider({
onImageStop:false,
switchEffect:'ease'
});
});
html代码块:
<div id="exp1" class="exmp smallslider">
<ul>
<li><a href="/common/images/001.jpg"><img src="/common/images/1.jpg" title=""/></a></li>
<li><a href="/common/images/002.jpg"><img src="/common/images/2.jpg" title=""/></a></li>
<li><a href="/common/images/003.jpg"><img src="/common/images/3.jpg" title=""/></a></li>
<li><a href="/common/images/004.jpg"><img src="/common/images/4.jpg" title=""/></a></li>
<li><a href="/common/images/005.jpg"><img src="/common/images/5.jpg" title=""/></a></li>
<li><a href="/common/images/003.jpg"><img src="/common/images/3.jpg" title=""/></a></li>
<li><a href="/common/images/004.jpg"><img src="/common/images/4.jpg" title=""/></a></li>
<li><a href="/common/images/005.jpg"><img src="/common/images/5.jpg" title=""/></a></li>
</ul>
</div>
第四步,部署project,启动。访问该页面