jquery圖片輪播器插件 jquery.slides

1，引入js文件

 <script src="${ctx}js/jquery-1.8.3.min.js"></script>
   
   <script src="${ctx}js/jquery.slides.min.js"></script>

2，輪播圖片div

   

<div id="slides">
	   <a href="javascript:;" ><img src="images/a3.jpg"/></a>
	   <a href="javascript:;" ><img src="images/a5.jpg"/></a>
</div>

3,js代碼

//圖片輪播
	 $('#slides').slidesjs({
	       
	        play: {
	          active: false,
	          auto: true,
	          interval: 2000,
	          swap: true,
	          pauseOnHover: true,
	          restartDelay: 2500
	        },
	       navigation: false
	      
	 });
	 
	 

4，添加切換圖片的點擊小圖標

<style type="text/css">
	
	.slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

	
	</style> 
	

分頁圖片