简洁好用的jquery 焦点图插件：Basic jQuery Slider

来源：互联网发布：linux能不能装apk 编辑：程序博客网时间：2024/05/22 06:09

官网地址：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>

0 0