0
我有一個jQuery工具可滾動我一直在努力一段時間,並已根據瀏覽器大小動態調整到其調整大小的位置,並且下一個按鈕在滾動條中最遠的點。將當前狀態添加到jQuery工具可滾動的項目
可滾動中的每個項目都會觸發背景更改。我現在試圖讓一個「當前」類切換。當你盤旋在他們身上時,你會看到一個白色的邊框。我希望這也是當前的狀態。我將如何去切換?
<div id="bkgrSelector">
<div class="scrollNav">
<a class="prev"></a>
</div>
<div class="scrollable">
<div class="items" id="thumbs">
<?php
for($i=0; $i < count($imageArray); $i++){
echo('<img onclick="changeBig(\''.$imageArray[$i].'\')" src="/lib/img/bkgr/'.$imageArray[$i].'" alt="thumbnail image" width="77" height="44" />');
}
?>
</div>
</div>
<div class="scrollNav">
<a class="next"></a>
</div>
的JavaScript:
//Initiates Background selector scrollable
$("#bkgrSelector .scrollable").scrollable();
//Changes the background selector scrollable size, and handles the disabling of the next button at end of scrollable
$(window).bind('resize', function(){
var width = $(document).width();
var thumbWidth = Math.round(width - 350);
$("#bkgrSelector").css("width", thumbWidth + "px");
$("#bkgrSelector .scrollable").css("width", (thumbWidth - 48) + "px");
var scrollable = jQuery("#bkgrSelector .scrollable").data("scrollable");
var size = Math.floor(thumbWidth/94);
console.log(size);
scrollable.onSeek(function(event, index) {
if (this.getIndex() >= this.getSize() - size) {
jQuery(".scrollNav .next").addClass("disabled");
}
});
scrollable.onBeforeSeek(function(event, index) {
if (this.getIndex() >= this.getSize() - size) {
if (index > this.getIndex()) {
return false;
}
}
});
}).resize()
CSS:
#bkgrSelector .items img:hover, #bkgrSelector .items .current
{padding:0; border:2px solid #fff; cursor:pointer; }
任何想法?任何人? – Keefer