简洁好用的jquery 焦点图插件：Basic jQuery Slider-CSDN博客

本文链接：https://blog.csdn.net/laoyaotask/article/details/42586081

<!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>