jquery 图片滚动插件

一般网站都有图片左右滚动的特效 下面就是jquery图片滚动插件
jQuery.fn.imageScroller = function(params){
	var p = params || {
		next:"buttonNext",
		prev:"buttonPrev",
		frame:"viewerFrame",
		scrolltime:3000,
		width:100,
		child:"a",
		auto:true
	}; 
	var _btnNext = $("#"+ p.next);
	var _btnPrev = $("#"+ p.prev);
	var _imgFrame = $("#"+ p.frame);
	var _width = p.width;
	var _height = p.height;
	var _child = p.child;
	var _auto = p.auto;
	var _itv;
	var _scrolltime=p.scrolltime;
	var _turndirection=p.turndirection;
	
	var turnLeft = function(){
		_btnPrev.unbind("click",turnLeft);
		if(_auto) autoStop();
		_imgFrame.animate( {marginLeft:-_width}, 'slow', '', function(){
			_imgFrame.find(_child+":first").appendTo( _imgFrame );
			_imgFrame.css("marginLeft",0);
			_btnPrev.bind("click",turnLeft);
			if(_auto) autoPlay();
		});
	};
	
	var turnRight = function(){
		_btnNext.unbind("click",turnRight);
		if(_auto) autoStop();
		_imgFrame.find(_child+":last").clone().show().prependTo( _imgFrame );
		_imgFrame.css("marginLeft",-_width);
		_imgFrame.animate( {marginLeft:0}, 'slow' ,'', function(){
			_imgFrame.find(_child+":last").remove();
			_btnNext.bind("click",turnRight);
			if(_auto) autoPlay(); 
		});
	};
	
	
	var turnTop = function(){
		_btnPrev.unbind("click",turnTop);
		if(_auto) autoStop();
		_imgFrame.animate( {marginTop:-_height}, 'slow', '', function(){
			_imgFrame.find(_child+":first").appendTo( _imgFrame );
			_imgFrame.css("marginTop",0);
			_btnPrev.bind("click",turnTop);
			if(_auto && _turndirection=='turnTop') autoTopPlay();
		});
	};
	
	_btnNext.css("cursor","hand").click( turnRight );
	_btnPrev.css("cursor","hand").click( turnLeft );
	
	var autoPlay = function(){
	  _itv = window.setInterval(turnLeft, _scrolltime);
	};
	var autoTopPlay = function(){
	  _itv = window.setInterval(turnTop, _scrolltime);
	};
	var autoStop = function(){
		window.clearInterval(_itv);
	};
	if(_auto && _turndirection=='turnTop')
	{
			autoTopPlay();
	}
	else{ autoPlay();}
};


    $(function()
    {
		
        
         $("#tjzt").imageScroller({
            frame:"tjzt_ul",  //div 或者ul id号
            width:310,   //li的宽度
            child:"li",  //子项目类型
            auto:true,  //是否自动滚动
            scrolltime:5000   //每个图片滚动间隔时间
    	});			
    });
不懂的咨询QQ:1013514858
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值