<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://www.jb51.net/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="https://www.jb51.net/Scripts/sliderbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".slideBox").slideBox();
})
</script>
</head>
<body>
<div >
<ul>
<li><a href="#" title="这里是测试标题一"><img src="https://www.jb51.net/image/1.png"></a></li>
<li><a href="#" title="这里是测试标题2"><img src="https://www.jb51.net/image/2.png"></a></li>
<li><a href="#" title="这里是测试标题3"><img src="https://www.jb51.net/image/3.png"></a></li>
<li><a href="#" title="这里是测试标题4"><img src="https://www.jb51.net/image/4.png"></a></li>
<li><a href="#" title="这里是测试标题5"><img src="https://www.jb51.net/image/5.png"></a></li>
</ul>
</div>
</body>
</html>
只需引入js并在页面中调用$(选择器).slideBox();便可实现如上效果，同时我们也可以在sliebox({})里面指定操作，比如起始图片，方向等。
这个是在前段时间一个项目中用到的图片轮播器插件，感觉还可以的可以直接拿来用。
您可能感兴趣的文章: