这里有一段js,如何让这个在页面加载时,图片就自动滚动,当点击左右按钮时,又可以左右移动
varSellerScroll=function(options){this.SetOptions(options);this.lButton=this.options....
var SellerScroll = function(options){
this.SetOptions(options);
this.lButton = this.options.lButton;
this.rButton = this.options.rButton;
this.oList = this.options.oList;
this.showSum = this.options.showSum;
this.iList = $("#" + this.options.oList + " > li");
this.iListSum = this.iList.length;
this.iListWidth = this.iList.outerWidth(true);
this.moveWidth = this.iListWidth * this.showSum;
this.dividers = Math.ceil(this.iListSum / this.showSum); //共分为多少块
this.moveMaxOffset = (this.dividers - 1) * this.moveWidth;
this.LeftScroll();
this.RightScroll();
};
SellerScroll.prototype = {
SetOptions: function(options){
this.options = {
lButton: "left_scroll",
rButton: "right_scroll",
oList: "carousel_ul",
showSum: 4 //一次滚动多少个items
};
$.extend(this.options, options || {});
},
ReturnLeft: function(){
return isNaN(parseInt($("#" + this.oList).css("left"))) ? 0 : parseInt($("#" + this.oList).css("left"));
},
LeftScroll: function(){
if(this.dividers == 1) return;
var _this = this, currentOffset;
$("#" + this.lButton).click(function(){
currentOffset = _this.ReturnLeft();
if(currentOffset == 0){
for(var i = 1; i <= _this.showSum; i++){
$(_this.iList[_this.iListSum - i]).prependTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: -_this.moveWidth });
$("#" + _this.oList + ":not(:animated)").animate( { left: "+=" + _this.moveWidth }, { duration: "slow", complete: function(){
for(var j = _this.showSum + 1; j <= _this.iListSum; j++){
$(_this.iList[_this.iListSum - j]).prependTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: -_this.moveWidth * (_this.dividers - 1) });
} } );
}else{
$("#" + _this.oList + ":not(:animated)").animate( { left: "+=" + _this.moveWidth }, "slow" );
}
});
},
RightScroll: function(){
if(this.dividers == 1) return;
var _this = this, currentOffset;
$("#" + this.rButton).click(function(){
currentOffset = _this.ReturnLeft();
if(Math.abs(currentOffset) >= _this.moveMaxOffset){
for(var i = 0; i < _this.showSum; i++){
$(_this.iList[i]).appendTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: -_this.moveWidth * (_this.dividers - 2) });
$("#" + _this.oList + ":not(:animated)").animate( { left: "-=" + _this.moveWidth }, { duration: "slow", complete: function(){
for(var j = _this.showSum; j < _this.iListSum; j++){
$(_this.iList[j]).appendTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: 0 });
} } );
}else{
$("#" + _this.oList + ":not(:animated)").animate( { left: "-=" + _this.moveWidth }, "slow" );
}
});
}
};
$(document).ready(function(){
var ff = new SellerScroll();
}); 展开
this.SetOptions(options);
this.lButton = this.options.lButton;
this.rButton = this.options.rButton;
this.oList = this.options.oList;
this.showSum = this.options.showSum;
this.iList = $("#" + this.options.oList + " > li");
this.iListSum = this.iList.length;
this.iListWidth = this.iList.outerWidth(true);
this.moveWidth = this.iListWidth * this.showSum;
this.dividers = Math.ceil(this.iListSum / this.showSum); //共分为多少块
this.moveMaxOffset = (this.dividers - 1) * this.moveWidth;
this.LeftScroll();
this.RightScroll();
};
SellerScroll.prototype = {
SetOptions: function(options){
this.options = {
lButton: "left_scroll",
rButton: "right_scroll",
oList: "carousel_ul",
showSum: 4 //一次滚动多少个items
};
$.extend(this.options, options || {});
},
ReturnLeft: function(){
return isNaN(parseInt($("#" + this.oList).css("left"))) ? 0 : parseInt($("#" + this.oList).css("left"));
},
LeftScroll: function(){
if(this.dividers == 1) return;
var _this = this, currentOffset;
$("#" + this.lButton).click(function(){
currentOffset = _this.ReturnLeft();
if(currentOffset == 0){
for(var i = 1; i <= _this.showSum; i++){
$(_this.iList[_this.iListSum - i]).prependTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: -_this.moveWidth });
$("#" + _this.oList + ":not(:animated)").animate( { left: "+=" + _this.moveWidth }, { duration: "slow", complete: function(){
for(var j = _this.showSum + 1; j <= _this.iListSum; j++){
$(_this.iList[_this.iListSum - j]).prependTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: -_this.moveWidth * (_this.dividers - 1) });
} } );
}else{
$("#" + _this.oList + ":not(:animated)").animate( { left: "+=" + _this.moveWidth }, "slow" );
}
});
},
RightScroll: function(){
if(this.dividers == 1) return;
var _this = this, currentOffset;
$("#" + this.rButton).click(function(){
currentOffset = _this.ReturnLeft();
if(Math.abs(currentOffset) >= _this.moveMaxOffset){
for(var i = 0; i < _this.showSum; i++){
$(_this.iList[i]).appendTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: -_this.moveWidth * (_this.dividers - 2) });
$("#" + _this.oList + ":not(:animated)").animate( { left: "-=" + _this.moveWidth }, { duration: "slow", complete: function(){
for(var j = _this.showSum; j < _this.iListSum; j++){
$(_this.iList[j]).appendTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: 0 });
} } );
}else{
$("#" + _this.oList + ":not(:animated)").animate( { left: "-=" + _this.moveWidth }, "slow" );
}
});
}
};
$(document).ready(function(){
var ff = new SellerScroll();
}); 展开
2个回答
展开全部
还氏键瞎乱是用jQuery做比歼神巧较方便:
http://wenku.baidu.com/view/d5d5f4245901020207409c18.html
http://wenku.baidu.com/view/d5d5f4245901020207409c18.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
楼迟郑主这码隐颂个问题用xml+flash实现动态交携裤互式flash可以实现
提供你点线索吧
好的话加分哟
提供你点线索吧
好的话加分哟
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询