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");

Jquery单击以滚动特定距离

1 个答案: