简洁好用的jquery 焦点图插件：Basic jQuery Slider
公良鸿风
官网地址：http://www.basic-slider.com/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basic jQuery Slider</title>
<link rel="stylesheet" href="bjqs.css">
<!-- load jQuery and the plugin -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bjqs-1.3.min.js"></script>
<script class="secret-source">
jQuery(document).ready(function($)
{
$('#banner-slide').bjqs({
animtype : 'slide', //动画类型：slide,fade
height : 320, //显示图片控件的高度,px
width : 620, //显示图片控件的宽度,px
responsive : true, //是否立即响应
randomstart : true, //是否随机选择起始图片
// 动画设置
animduration : 450, // 动画持续时间
animspeed : 4000, // 动画延迟
automatic : true, // 是否自动切换
// 控件设置
showcontrols : true, // 是否在图上显示next，prev按钮
centercontrols : true, // 上述控件是否要垂直居中
nexttext : 'Next', // “下一页”功能按钮文字
prevtext : 'Prev', // “上一页”功能按钮文字
showmarkers : true, // 是否在图下面显示带有图序号的切换按钮
centermarkers : true, // 上述按钮是否水平居中
// 交互设置
keyboardnav : true, // 是否启用键盘操作
hoverpause : true, // 鼠标悬停时是否停止
});
});
</script>
</head>
<body>
<div id="container">
<div id="banner-slide">
<ul class="bjqs">
<li><img src="img/banner01.jpg" title="Automatically generated caption"></li>
<li><img src="img/banner02.jpg" title="Automatically generated caption"></li>
<li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
</ul>
</div>
</div>
</body>
</html>
类似资料：