javascript - 在下一个上一个点击 jquery 上滑动 div block

Question

我想知道如何通过单击控件来 slider - 下一个 - 上一个。

我的主 div 的宽度为 1400px & 在一些子 div 下有 300px 宽度 float 。

在屏幕上，我想显示 3 个 block ，它们现在可以在下一个按钮上单击，我希望这些 block 滚动。

<!--blocks-starts-->
    <div class="common-blocks">
        <h2>ADVENTURE</h2>
        <div class="blocks"><!--blocks-starts-->
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_03.gif" />
            </div>

            <div class="block-content">
                <h3>River Rafting</h3>
                <p>Get ready to ride nature's rollercoaster in this once in a lifetime. White Water Rafting experience on the Kundalika River in Kolad.</p>
            </div>                
        </div><!--blocks-ends-->

        <div class="blocks"><!--blocks-starts-->
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_06.gif" />
            </div>
            <div class="block-content">
                <h3>Helicopter Tour Of Mumbai</h3>
                <p>Customized The concept of Joy Rides is here. South Mumbai Juhu , Bandra - Worli Sealink, Worli Sea Face, Mahalaxmi Temple and more.</p>
            </div>
        </div><!--blocks-ends-->

        <div class="blocks"><!--blocks-starts-->
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_08.gif" />
            </div>
            <div class="block-content">
                <h3>Scuba Diving</h3>
                <p>Discover a spectacular world, where sound and gravity seem to forget about you for a while.</p>
            </div>
        </div><!--blocks-ends-->

        <div class="blocks"><!--blocks-starts-->
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_03.gif" />
            </div>

            <div class="block-content">
                <h3>River Rafting</h3>
                <p>Get ready to ride nature's rollercoaster in this once in a lifetime. White Water Rafting experience on the Kundalika River in Kolad.</p>
            </div>
        </div><!--blocks-ends-->

    </div><!--common-blocks-ends-->

CSS

.common-blocks{
    width:100%;
    width:1400px;
    margin:20px auto 0 auto;
    overflow:hidden;
    height:auto;
}

.common-blocks h2{
    margin:0 0 10px 0;
    padding:0 0 10px 0;
    border-bottom:2px solid #ccc;
}

.blocks{
    width:300px;
    border:1px solid #ccc;
    display:inline-block;
    margin:5px 40px 20px 0;
    vertical-align:top;
    color:#454545;
    padding:0 0 5px 0;
    height:310px;
}

Answer 1

请试试这个 JS 版本:

HTML:-

<div class="outer-div">
<h2>ADVENTURE</h2>
<div class="common-blocks" id="common-blocks">

        <!--blocks-starts--><div class="blocks">
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_03.gif" />
            </div>

            <div class="block-content">
                <h3>River Rafting</h3>
                <p>Get ready to ride nature's rollercoaster in this once in a lifetime. White Water Rafting experience on the Kundalika River in Kolad.</p>
            </div>                
        </div><!--blocks-ends-->

        <!--blocks-starts--><div class="blocks">
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_06.gif" />
            </div>
            <div class="block-content">
                <h3>Helicopter Tour Of Mumbai</h3>
                <p>Customized The concept of Joy Rides is here. South Mumbai Juhu , Bandra - Worli Sealink, Worli Sea Face, Mahalaxmi Temple and more.</p>
            </div>
        </div><!--blocks-ends-->

        <!--blocks-starts--><div class="blocks">
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_08.gif" />
            </div>
            <div class="block-content">
                <h3>Scuba Diving</h3>
                <p>Discover a spectacular world, where sound and gravity seem to forget about you for a while.</p>
            </div>
        </div><!--blocks-ends-->

                            <!--blocks-starts--><div class="blocks">
                                <div class="block-img">
                                    <img src="images/foxbox-home-page_version_27_03.gif" />
                                </div>

                                <div class="block-content">
                                    <h3>River Rafting</h3>
                                    <p>Get ready to ride nature's rollercoaster in this once in a lifetime. White Water Rafting experience on the Kundalika River in Kolad.</p>
                                </div>
                            </div><!--blocks-ends-->

    </div><!--common-blocks-ends-->
    <button class="next">Next</button>
    <button class="prev">Previous</button>
 </div>

<div class="outer-div">
<h2>ADVENTURE</h2>
<div class="common-blocks" id="common-blocks">

        <!--blocks-starts--><div class="blocks">
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_03.gif" />
            </div>

            <div class="block-content">
                <h3>River Rafting</h3>
                <p>Get ready to ride nature's rollercoaster in this once in a lifetime. White Water Rafting experience on the Kundalika River in Kolad.</p>
            </div>                
        </div><!--blocks-ends-->

        <!--blocks-starts--><div class="blocks">
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_06.gif" />
            </div>
            <div class="block-content">
                <h3>Helicopter Tour Of Mumbai</h3>
                <p>Customized The concept of Joy Rides is here. South Mumbai Juhu , Bandra - Worli Sealink, Worli Sea Face, Mahalaxmi Temple and more.</p>
            </div>
        </div><!--blocks-ends-->

        <!--blocks-starts--><div class="blocks">
            <div class="block-img">
                <img src="images/foxbox-home-page_version_27_08.gif" />
            </div>
            <div class="block-content">
                <h3>Scuba Diving</h3>
                <p>Discover a spectacular world, where sound and gravity seem to forget about you for a while.</p>
            </div>
        </div><!--blocks-ends-->

                            <!--blocks-starts--><div class="blocks">
                                <div class="block-img">
                                    <img src="images/foxbox-home-page_version_27_03.gif" />
                                </div>

                                <div class="block-content">
                                    <h3>River Rafting</h3>
                                    <p>Get ready to ride nature's rollercoaster in this once in a lifetime. White Water Rafting experience on the Kundalika River in Kolad.</p>
                                </div>
                            </div><!--blocks-ends-->

    </div><!--common-blocks-ends-->
   <button class="next">Next</button>
   <button class="prev">Previous</button>
 </div>

CSS:-

.common-blocks{
    width:100%;
    width:1400px;
    overflow:hidden;
    height:auto;
    transition:all 0.5s;
    margin-left:0px;
}

.common-blocks h2{
    margin:0 0 10px 0;
    padding:0 0 10px 0;
    border-bottom:2px solid #ccc;
}

.blocks{
    width:300px;
    border:1px solid #ccc;
    display:inline-block;
    margin:5px 40px 20px 0;
    vertical-align:top;
    color:#454545;
    padding:0 0 5px 0;
    height:310px
}
.outer-div{
    width:1000px;
    overflow:hidden;
}

jQuery: -

var registerEvents = function(){
$(".next").off("click").on("click",function(event){
    if($(this).hasClass('disable'))return;
    $(this).addClass('disable');
    window.setTimeout(function(){
        $(event.target).removeClass('disable');
    },510);
    var targetBlock = $(event.target).siblings('.common-blocks');
    var leftMargin = parseInt(targetBlock.css("marginLeft") || 0) ;
    var numberOfBlocks = targetBlock.children(".blocks").length; //    Total Number of blocks 
    var displayCount = 3;//Number of blocks displaying at a time
    if(leftMargin <= (numberOfBlocks-displayCount)*(-300))  // -300 width   of    block in left direction
        return;
    targetBlock.css("marginLeft",parseInt(leftMargin - 300)+"px")
});
$(".prev").off("click").on("click",function(event){
    if($(this).hasClass('disable'))return;
    $(this).addClass('disable');
    window.setTimeout(function(){
        $(event.target).removeClass('disable');
    },510);
    var targetBlock = $(event.target).siblings('.common-blocks');
    var leftMargin = parseInt(targetBlock.css("marginLeft") || 0) ;
    if(leftMargin == 0) 
        return;
    targetBlock.css("marginLeft",parseInt(leftMargin + 300)+"px")
});

}();