首页 > 其他 > 详细

轮播图适应代码jQ

时间:2015-12-10 12:51:42      阅读:210      评论:0      收藏:0      [点我收藏+]
(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存放图片,

轮播图适应代码jQ

原文:http://www.cnblogs.com/xingst/p/5035400.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!