jquery图片轮播器插件 jquery.slides

来源：互联网发布：淘宝仓库管理员累吗编辑：程序博客网时间：2024/06/05 00:26

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>

分页图片

0 0