javascript - jquery点击滚动特定距离

Question

我在一个 div 中有一个水平图像列表。每个图像的宽度为 60%。我想像这样显示它们，一次只能看到 3 张图像，第一部分应该只包含 20% 的图像，第二部分应该包含 60%(完整)，第三部分应该包含 20% 的图像。当我想为大量图像实现此功能时会出现问题。

假设我有 5 张图片，我希望它们像这张图一样，第一张图片占 20%，第二张图片占 60%，第三张图片占 20%。单击下一个按钮时，我希望第二张图片变为 20%，第三张图片变为 60%(完成)，第四张图片变为 20% 宽度，依此类推。

这是我想出的代码

   <div class="center" id="content">

             <!--First Image 20%by default--><div id="internal-cover" class="internal" style="width:20%"></div>

             <!--Second Image--><div id="internal" class="internal"></div>

    <!--Third Image--><div id="internal" class="internal"></div>
             <!--fourth Image--><div id="internal" class="internal"></div>
                     <!--Fifth Image--><div id="internal" class="internal" ></div>


    </div>



            <style type="text/css">

            body
            {
            margin: 0px auto;
            height: 100%;
            width: 100%;
            overflow: hidden;
            }
                /* Put your css in here */



            .internal{
            width: 60%;
            height: 100%;
            background-size:cover; 
            display: inline-block;

            }

            .center{
            float: left; 
            width: 100%;
            height: 100vh;
            overflow: hidden;
            /*will change this to hidden later to deny scolling to user*/
            white-space: nowrap;
            }



            </style>
            </body>

            </html>




            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

            <script type="text/javascript">
            // Add your javascript here


    var first =0;
            var second = first+1;
            var third= second+1;
            var ctr=0;
            $('#internal-cover').addClass("left-button");

            $(document).on("click",".right-button",function(){
              event.preventDefault();
              //resetSize();
              $('#content').animate({
                scrollLeft: "+=812px"//20%Left 60-40% = 60%of Width

              }, "fast");
     console.log(
    $('.center').scrollLeft()
             );
              first++;
              second++;
              third++;handleSet();
            });

            $(document).on("click",".left-button",function(){

              event.preventDefault();
              //resetSize();
              $('#content').animate({
                scrollLeft: "-=812px"
              }, "fast");

              first--;
              second--;
              third--;
              handleSet();

            });

             function resetSize()
             {
                $('.internal').each(function(){

                        $(this).css("width","60%");

                });
             }
             function handleSet()
             {  

                    console.log(first+"---"+second+"---"+third);
                    $('.internal').each(function(){

                            $(this).removeClass("left-button");
                            $(this).removeClass("right-button");

                    });
                    $('.internal'+first).addClass("left-button")
                    $('.internal'+third).addClass("right-button");
             }



            </script>

像这样

Answer 1

对于将来寻求解决方案的任何人。请查看此页面 https://gist.github.com/tim-reynolds/3019761

var out = $('.center'); //Outer Div containing all the child elements
var tar = $('#internal-target')); //Identifier of the target element, theone 
                                 that needs to be centered.
 var x = out.width();
 var y = tar.outerWidth(true);
 var z = tar.index();
 var q = 0;
 var m = out.find('.internal'); 
 //Just need to add up the width of all the elements before our target. 
 for(var i = 0; i < z; i++){
  q+= $(m[i]).outerWidth(true);
   } out.animate({
        scrollLeft: Math.max(0, q - (x - y)/2)+"px"
      }, "fast");