在另一个功能中向左/向右移动div

Question

当图像向左/向右移动时，尝试向左/向右移动我的“ sliding_head” div：

这是我的CSS，HTML和JS（包括我的尝试）。 我的尝试不起作用，因为我在左/右功能之外设置了该值，而当我在其中设置该值时却不起作用。 往左滑动时，标头需要向左滑动509px，向右滑动时，标头需要回到其起始位置。 如何在插件函数中调整以下JS以实现此目的？

        #second {
            position:absolute;
            left:1024px;
            width:2048px;
            height:768px;
            background-color: #f3f0ef;

        }

        .sliding_content {

        }

        .sliding_head {
            position: absolute;
            top: 119px;
            left: 140px;
        }

        .sliding_2 {
            position: absolute;
            left: 1024px;
        }

        .imgs img{
            float: left;
        }

的HTML

<div id="second">
                    <img class="notes" src="img/2-top.jpg" />
                     <img src="img/2-top-2.jpg" />
                     <img src="img/2-middle.jpg" />
                        <div class="sliding_content">
                            <img class="sliding_head" src="img/2-sliding_head.png" /> <!-- this is the header image that needs to slide 509px left when swiping left and back to its start position when swiping right -->

                            <div class="galleryTouch">
                              <div class="imgs">
                                <img src="img/2-sliding_1.png">
                                <img src="img/2-sliding_2.png">
                              </div>
                            </div>
                        </div>
                </div>

尝试使用JS（我的注释以CAPS形式在线显示）

$(function() {
        var IMG_WIDTH = 1024,
        currentImg=0,
        maxImages=2;
        speed=500,
        imgs = $(".imgs");
        head = $(".sliding_head"); //ADDED VAR FOR ADDED SLIDING DIV



        //Init touch swipe
        imgs.swipe( {
            triggerOnTouchEnd : true,
            swipeStatus : swipeStatus,
            allowPageScroll:"vertical"
        });


        /**
        * Catch each phase of the swipe.
        * move : we drag the div.
        * cancel : we animate back to where we were
        * end : we animate to the next image
        */
        function swipeStatus(event, phase, direction, distance, fingers)
        {
            //If we are moving before swipe, and we are going L or R, then manually drag the images
            if( phase=="move" && (direction=="left" || direction=="right") )
            {
                var duration=0;

                if (direction == "left") 
                    scrollImages((IMG_WIDTH * currentImg) + distance, duration);
                    //I'VE TRIED HERE
                else if (direction == "right")
                    scrollImages((IMG_WIDTH * currentImg) - distance, duration);
                    //AND HERE BUT IT STOPS WORKING
            }

            //Else, cancel means snap back to the begining
            else if ( phase == "cancel")
            {
                scrollImages(IMG_WIDTH * currentImg, speed);
            }

            //Else end means the swipe was completed, so move to the next image
            else if ( phase =="end" )
            {
                if (direction == "right")
                    previousImage();
                else if (direction == "left")
                    nextImage()
            }
        }

        function previousImage()
        {
            currentImg = Math.max(currentImg-1, 0);
            scrollImages( IMG_WIDTH * currentImg, speed);
        }

        function nextImage()
        {
            currentImg = Math.min(currentImg+1, maxImages-1);
            scrollImages( IMG_WIDTH * currentImg, speed);
        }

        /**
         * Manually update the position of the imgs on drag
         */
        function scrollImages(distance, duration)
        {
            imgs.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s");
            //inverse the number we set in the css
            var value = (distance<0 ? "" : "-") + Math.abs(distance).toString();
            imgs.css("-webkit-transform", "translate3d("+value +"px,0px,0px)");

            //ADDED THIS IN MY LATEST ATTEMPT, IT JUST SLIDES TO NEW POSITION BUT NOT BACK
            head.css("-webkit-transition-duration", (duration/500).toFixed(1) + "s"); //DO THIS ONE SLOWER
            //MAKE 'VALUE' AN INT (WILL BE -1024) AND SET IN NEW VAR PLUS 509 LEFT TO POSITION CORRECTLY
            var headval = parseInt(value)+509;
            head.css("-webkit-transform", "translate3d("+headval +"px,0px,0px)");

        }
    });

Answer 1

通过在if（direction ==“ left”）和if（direction ==“ right”）中设置运动来解决。