轮播图适应代码jQ

(function(){
		var i = 0;
		var time ;
		$('.page-size').html('1');
		var obj = $('.xst-scroll>li');
		var imgChange  =  function(){
			$('.page-size').html(i+1);
			obj.animate({
				opacity: '0'},
				100, function() {
				obj.css({
					display: 'none'
				});
				obj.eq(i).css({
					display: 'block'
				});
				obj.eq(i).animate({
					opacity: '1'},
					100);
			});
		}
		var imgAuto = function(){
			i++;
			if(i>=obj.length){
				i=0;
			};
			imgChange();
		}
		var imgLeft = function(){
			clearInterval(time);
			i--;
			if(i<0){
				i=obj.length-1;
			}
			imgChange();
			time = setInterval(imgAuto, 5000);
		}
		var imgRight = function(){
			clearInterval(time);
			i++;
			if(i>=obj.length){
				i=0;
			};
			imgChange();
			time = setInterval(imgAuto, 5000);
		}
		$('.page-sum').html(obj.length);
		time = setInterval(imgAuto, 5000);
		$('.previous').click(function(event) {
			imgLeft();
		});
		$('.next').click(function(event) {
			imgRight();
		});
	})();
	//轮播图代码

  使用说明:.page-size显示当前页码(第几张图),.page-sum显示总共页码(共几张图);.previous上一张,.next下一张,.xst-scroll>li存放图片,

转载于:https://www.cnblogs.com/xingst/p/5035400.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值