[英]Manipulate a slider with next and previous
可以操纵此滑块,以便通过单击按钮将其转到上一个项目,然后转到下一个项目吗?
当前,可以通过第一个分隔器中的链接(“ 1 2 3 4 5”)在分隔器之间移动,并通过每个分隔器上的“后退”链接返回第一个分隔器。
HTML:
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<a href="#item1" class="panel">1</a>
<a href="#item2" class="panel">2</a>
<a href="#item3" class="panel">3</a>
<a href="#item4" class="panel">4</a>
<a href="#item5" class="panel">5</a>
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content"><a href="#item1" class="panel">back</a></div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content"><a href="#item1" class="panel">back</a></div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content"><a href="#item1" class="panel">back</a></div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
JavaScript:
$(document).ready(function () {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({
width: width,
height: height
});
$('#mask').css({
width: mask_width,
height: height
});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
您需要从项目中删除导航链接,并使用按钮创建单独的导航面板。
$(document).ready(function () { function shift(direction) { var $mask = $('#mask'), items = $('.item').size(), currentItem = $mask.data('currentItem'), newItem; if (currentItem == undefined) { currentItem = 0; } newItem = currentItem + direction; $mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem}); if (newItem == 0) { $("#prev").prop('disabled', true); } else { $("#prev").prop('disabled', false); } if (newItem == items - 1) { $("#next").prop('disabled', true); } else { $("#next").prop('disabled', false); } } $('#prev').click(function() { return shift(-1); }); $('#next').click(function() { return shift(1); }); });
#wrapper { width: 500px; height: 100%; position: absolute; top: 0; left: 0; background-color: #ccc; overflow: hidden; } #nav button { position: absolute; top: 100px; } #prev { left: 40px; } #next { right: 40px; } #mask { width: 5000px; height: 100%; background-color: #eee; } .item { width: 500px; height: 100%; float: left; background-color: #ddd; } .content img { height: 100px; width: 100px; float:left; margin-right: 4%; margin-bottom: 6%; } .content { width: 45%; height: 220px; top: 20%; margin: auto; background-color: white; position: relative; } .content a { position: relative; top: -17px; left: 170px; } .selected { background: #fff; font-weight: 700; } .clear { clear:both; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div id="nav"> <button id="prev" disabled><<<</button> <button id="next">>>></button> </div> <div id="mask"> <div id="item1" class="item"> <a name="item1"></a> <div class="content"> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> </div> </div> <div id="item2" class="item"> <div class="content"> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> </div> </div> <div id="item3" class="item"> <a name="item3"></a> <div class="content"> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> </div> </div> <div id="item4" class="item"> <a name="item4"></a> <div class="content"> <img src="http://placehold.it/100x100" /> </div> </div> <div id="item5" class="item"> <a name="item5"></a> <div class="content"> <img src="http://placehold.it/100x100" /> <img src="http://placehold.it/100x100" /> </div> </div> </div> </div>
该解决方案尚未完成。 它不会考虑窗口大小的调整。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.