jquery图片轮播器插件 jquery.slides

本文介绍了一种使用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> 
	

分页图片

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值