[英]Slide div blocks on next previous click jquery
我的主要部分是1400px的寬度&在一些兒童div下有300px寬度與浮動。
在屏幕上我想顯示3個塊現在正在下一個按鈕單擊我想要這個塊滾動。
<!--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;
}
請試試這個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")
});
}();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.