一般网站都有图片左右滚动的特效 下面就是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