Question

我在页面上显示许多图片。我想创建一个动画，在屏幕中间居中显示用户click的图片。然后，在任何click事件之后，我想显示下一张图片，直到用户离开此演示模式。注意：我将jquery scrollTo脚本添加到我的代码中。

以下是我迄今所做的工作：http://jsfiddle.net/qnQSP/3/

HTML

<div id="galleries">

    <div id="pictures-content" class="1"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div>
    <div id="pictures-content" class="2"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div>
    <div id="pictures-content" class="3"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div>
    <div id="pictures-content" class="4"><img src="http://www.webdesign4essex.co.uk/images/essex_website_design.jpg"></div>
    <div id="pictures-content" class="5"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div>

</div>

Jquery

        var next;
        var element_already_focus = 0;
        var oldcurrent = "";        

        $("#galleries #pictures-content").unbind("click");
        $("#galleries #pictures-content").bind("click", function(event) {
            // Count the number of pictures
            var max_number_of_pictures= $('#galleries #pictures-content').length;
    //          console.log("max_number_of_pictures: "+max_number_of_pictures); 

            // Get the binding element class number 
                var picture_number = $(this).attr('class');
    //          console.log("picture_number: "+picture_number);

            // Save the element inside the current variable
                current=$(this);


            // Do a loop to go to the top picture when  
            if(picture_number==max_number_of_pictures)
            {
                next = $("#galleries .1");
            } else 
            { 
                next = $(this).next();
            }

            // Do a loop to go to the bottom picture    
            if(picture_number==1){
                previous = $("#galleries ."+max_number_of_pictures);
            } else { previous = $(this).prev();}


    //      console.log("current: "+$(this).attr("class"));
            if(oldcurrent != "")
            {   
                console.log("old: "+oldcurrent.attr("class"));
// Doing some test
                class_test = parseInt(oldcurrent.attr("class"));
                class_test = parseInt(class_test)+parseInt(1);
                console.log("old: "+class_test);
            }

            console.log("previous: "+previous.attr("class"));
            console.log("current: "+current.attr("class"));
            console.log("next: "+next.attr("class"));

    if(oldcurrent == "")
    {
        $("body").scrollTo(current, 800);
        next = 0;
        console.log("What we do:"+next);
    }
    else{
    // If the element that we are binding have the same class as the old binding element (previous)
    // We are redirecting the user to the next picture
            console.log("oldcurrent "+oldcurrent.attr("class"));
            console.log("current: "+current.attr("class"));
            console.log("next: "+next.attr("class"));

    //   if((oldcurrent.attr("class"))==($(this).attr("class"))||(class_test)==(next.attr("class"))) {
       if((oldcurrent.attr("class"))==(current.attr("class"))||(class_test)==(next.attr("class"))) {   
          $("body").scrollTo(next, 800);    
          next = 1;
          console.log("What we do:"+next);
      }else{
          $("body").scrollTo(current, 800);
          next = 0;
          console.log("What we do:"+next);
      }     
    }

      oldcurrent=current;

        });

我的问题：我必须在图片上点击两次才能转到下一张图片。如果我删除了这个条件，当我离开演示模式时，我就无法对另一张照片进行对焦。

我认为我必须在用户处于演示模式时（已经点击图片）定义状态，并在他离开演示模式时删除此状态。

有人有任何想法或解决方案吗？

Answer 1

单击时只验证图像是否在渲染视图中。如果是，那么您可以假设点击是滚动到下一个图像。

您可以使用$(yourImage).position().top了解图片的起始位置。并且$(yourImage).height()知道它的高度。

var imageTop =  $(yourImage).position().top,
    imageHeight = $(yourImage).height(),
    windowTop = $(yourImage).height(),
    windowHeight = $(window).height();

if(imageTop>windowTop && top+height < windowTop+windowHeight){
   Scroll to the next one
}

或者，如果您希望图像始终位于顶部：

if(imageTop==windowTop){
   Scroll to the next one
}

+1用于链接小提琴

Jquery，关注一个元素然后滚动到下一个＆amp;下一个＆amp;下一个

1 个答案: