我有一个用于显示放置在页面中心的图像的div，在div下面我添加了使用jcarousel显示图像缩略图的滑块，单击滑块上的缩略图图像显示位于正上方的div内的较大图像滑块，这是使用ajax完成的，我的意思是我只是更改div的内容以显示所选图像，但每当我点击滑块中的缩略图来加载图像时，页面就会滚动并显示图像，可能是什么这个问题，请建议。
Array.prototype.indexOf = function(obj, start) {
for (var i = (start || 0), j = this.length; i < j; i++) {
if (this[i] == obj) { return i; }
}
return -1;
}
var picList = new Array();
picList.length = 0;
function showMoreVideo(move) {
//get picture_id of currently displayed picture
var lastId = picList[picList.length - 1];
var firstId = picList[0];
var curPictId = parseInt($("#hidPicId").val());
if(move == "nxt") {
//get the index of current picture id
$("#divPrev").css("display", "block");
if(curPictId == lastId) {
$("#divNxt").css("display", "none");
return false;
}
else {
var curIdx = picList.indexOf(curPictId);
var nxtIdx = parseInt(curIdx + 1);
var nxtId = picList[nxtIdx];
var hrf = "<?php echo base_url().'seeker/gallery/ajaxLoadGallery/'.$flag.'/'.$tab.'/'.$pId .'/';?>"+nxtId;
var url = "url(<?php echo base_url() ."images/ajax_loader.gif"; ?>)";
//$("#imgpic").css({"background-image": url, "background-repeat": "no-repeat", "background-position" : "310px 50%", "width": "650px", "height": "386px"} );
var dataString = "";
$.ajax({
type: "POST",
url: hrf,
data: dataString,
success: function(content){
if(content !=''){
$('#ajaxContent').html(content).hide().fadeIn();
//style="border: 1px solid #f2efea; padding: 1px;"
$("img[id^='img_']").css( {"border": "1px solid #f2efea", "padding":"1px"});
$("img[id='img_"+nxtId+"']").css("border", "1px solid <?php echo $cat_color;?>");
//$("#mycarouse_picture").focus();
//scroll(0,425) ;
var currentPos = parseInt(curIdx + 1);
$('.control_next').trigger("click", [currentPos,'0']);
return false;
}else {
alert("Couldn't load image. Retry later!");
}
}
});
$("#hidPicId").val('');
$("#hidPicId").val(nxtId);
if(nxtId == lastId) {
$("#divNxt").css("display", "none");
return false;
}
return false;
}
}
else if(move == "prev") {
$("#divNxt").css("display", "block");
if(curPictId == firstId) {
$("#divPrev").css("display", "none");
return false;
}
var curIdx = picList.indexOf(curPictId);
var prevIdx = parseInt(curIdx - 1);
var prevId = picList[prevIdx];
var nhrf = "<?php echo base_url().'seeker/gallery/ajaxLoadGallery/'.$flag.'/'.$tab.'/'.$pId .'/';?>"+prevId;
var url = "url(<?php echo base_url() ."images/ajax_loader.gif"; ?>)";
//$("#imgpic").css({"background-image": url, "background-repeat": "no-repeat", "background-position" : "310px 50%", "width": "650px", "height": "386px"} );
var dataString = "";
$.ajax({
type: "POST",
url: nhrf,
data: dataString,
success: function(content){
if(content !=''){
$('#ajaxContent').html(content).hide().fadeIn();
$("img[id^='img_']").css( {"border": "1px solid #f2efea", "padding":"1px"});
$("img[id='img_"+prevId+"']").css("border", "1px solid <?php echo $cat_color;?>");
//$("#mycarouse_picture").focus();
//scroll(0,425) ;
var currentPos = parseInt(curIdx - 1);
currentPos = (currentPos < 1) ? 0 : currentPos;
$('.control_prev').trigger("click", [currentPos,'0']);
return false;
}else {
alert("Couldn't load image. Retry later!");
return false;
}
}
});
$("#hidPicId").val('');
$("#hidPicId").val(prevId);
if(prevId == firstId) {
$("#divPrev").css("display", "none");
return false;
}
return false;
}
return false;
}
function fnChangePic(imgpath,currentLi,obj)
{
var url = "url("+imgpath+")";
// $(".test_sider > li").attr('id').not(":eq("+liId+")").hide();
//$(".test_sider > li:eq("+currentLi+")").fadeIn("slow");
$("#imgpic").css({"background": url,"background-repeat": "no-repeat","background-position":"53% 50%", "width": "650px", "height": "386px","overflow":"hidden"});
$("img[id^='img_']").css( {"border": "1px solid #f2efea", "padding":"1px"});
$(obj).children().css("border", "1px solid <?php echo $cat_color;?>");
return false;
}
jQuery(document).ready(function() {
jQuery('#mycarouse_picture').jcarousel({
auto: 0,
scroll:8,
visible:8,
initCallback: mycarousel_initPictureCallback
});
$('.gallerythumnailimage').click(function(evt){
//scroll(0,425) ;
evt.preventDefault();
var cId = $(this).children().attr("id");
var curIdArr = cId.split("_");
var crtId = curIdArr[1];
if(picList.indexOf(crtId) > 0) {
$("#divPrev").show();
}
else {
$("#divPrev").hide();
}
if(picList.indexOf(crtId) >= (picList.length - 1)) {
$("#divNxt").hide();
}
else {
$("#divNxt").show();
}
$("img[id^='img_']").css( {"border": "1px solid #f2efea", "padding":"1px"});
$(this).children().css("border", "1px solid <?php echo $cat_color;?>");
//var loading = "<div style='font-weight:bold;width: 200px; height: 95px; padding:150px 295px;line-height:400px;'><img width='64' height='64' src='<?php echo base_url() ."images/ajax_loader.gif"; ?>' /><br /><span style='margin-top:2px;line-height:40px;'> Loading...</span></div>";
//$('#ajaxContent').html(loading);
var url = "url(<?php echo base_url() ."images/ajax_loader.gif"; ?>)";
//$("#imgpic").css({"background-image": url, "background-repeat": "no-repeat", "background-position" : "310px 50%", "width": "650px", "height": "386px"} );
//return false;
var dataString = "";
$.ajax({
type: "POST",
url: $(this).attr('rel'),
data: dataString,
success: function(content){
if(content !=''){
$('#ajaxContent').html(content).hide().fadeIn();;
//scroll(0,425) ;
return false;
}else {
alert("Couldn't load image. Retry later!");
return false;
}
}
});
return false; // don't let the link reload the page
});
return false;
});
function mycarousel_initPictureCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
jQuery('.control_prev').bind('click', function(event, a, b) {
if( (a/8) < 1){
carousel.scroll(jQuery.jcarousel.intval(a-1));
}
return false;
});
jQuery('.control_next').bind('click', function(event, a, b) {
if((a%8) == 0){
carousel.scroll(jQuery.jcarousel.intval(a+1));
}
return false;
});
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};