jquery图片轮播器插件 jquery.slides

最新推荐文章于 2025-06-10 09:16:52 发布

MichaelW666

最新推荐文章于 2025-06-10 09:16:52 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/wushuchu/article/details/50848826

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种使用jQuery实现图片轮播的方法，包括引入必要的JS文件、设置轮播图片的div结构及对应的JS配置，同时提供了添加切换图片点击小图标的样式代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

分页图片