2

我在一个页面上显示许多图片。我想创建一个动画，将用户刚刚看到的图片放在屏幕中间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;

        });

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

我想我必须在用户处于演示模式（已经单击图片）时定义一个状态，并在他通过移动停止演示模式时删除此状态。

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

4

1 回答 1

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 用于链接小提琴

于 2013-03-14T11:52:30.677 回答