我有我的腳本設置,以便當用戶點擊上一個鏈接時,它會顯示上一張幻燈片,但是,我已經設置它,以便當用戶懸停在下一個和上一個按鈕上時下一張/上一張幻燈片的一小部分被反彈到視圖中,然後當鼠標移出這些按鈕時再次隱藏。jQuery以前的幻燈片懸停
但是,上一張幻燈片沒有進入查看...我怎麼能得到這個工作?
我創建了我的腳本的的jsfiddle - http://jsfiddle.net/BHbGY/1/
我有我的腳本設置,以便當用戶點擊上一個鏈接時,它會顯示上一張幻燈片,但是,我已經設置它,以便當用戶懸停在下一個和上一個按鈕上時下一張/上一張幻燈片的一小部分被反彈到視圖中,然後當鼠標移出這些按鈕時再次隱藏。jQuery以前的幻燈片懸停
但是,上一張幻燈片沒有進入查看...我怎麼能得到這個工作?
我創建了我的腳本的的jsfiddle - http://jsfiddle.net/BHbGY/1/
Here's a working example of everything below。
我的方法是將第一個簡化的HTML:
<div id="slide_nav">
<a href="#" class="prev">« Previous</a>
<a href="#" class="next">Next »</a>
</div>
<ul id="slide_container">
<li class="one slide">one</li>
<li class="two slide focused">two</li>
<li class="three slide">three</li>
</ul>
代替使用所有的固定寬度(例如width: 9999px;
)的我設置所有屬性裏到100%的寬度和使用的位置絕對。然後,您可以簡單地更改left
屬性來移動事物。
#slide_container li {
width: 100%;
height: 600px;
display: block;
position: absolute;
top: 0;
left: 0;
}
#slide_container .one {
background-color: #900;
left: -100%;
}
#slide_container .two {
display: block;
background-color: #090;
}
#slide_container .three {
background-color: #009;
left: 100%;
}
這看起來似乎很複雜,在第一,因爲animate
不喜歡的百分比了。但是,你的內容將自動地填寫自己的容器,所以它的價值這個頁面加載額外的小轉換,使這一切工作:
// change all percentages to pixels because animate hates percent
// and seems to lose position over time
var base = 0-$('#slide_container li').eq(0).outerWidth(true);
$('#slide_container li').each(function() {
var $this = $(this);
$this.css('left', base+'px');
base += $this.outerWidth(true);
});
然後創建一個插件,它可以簡化您的代碼結構:
$.fn.extend({
slideMyDivs: function(method, amount) {
if (!amount) {
amount = this.eq(0).outerWidth(true);
}
switch (method) {
case 'prev':
this.stop(true, true).animate({
left: '+=' + amount
}, {
duration: 600,
easing: 'easeInOutExpo'
});
break;
case 'next':
this.stop(true, true).animate({
left: '-=' + amount
}, {
duration: 600,
easing: 'easeInOutExpo'
});
break;
default:
throw new Error('Invalid method: ' + method);
}
return this;
}
});
然後我會成立一個方法來禁用的鏈接,當你到達終點列表/啓動:
function toggleLinks() {
if (!hasPrev()) {
$('#slide_nav .prev')
.addClass('disabled')
.bind('click.disabled', function() { return false; });
}
else {
$('#slide_nav .prev').removeClass('disabled').unbind('.disabled');
}
if (!hasNext()) {
$('#slide_nav .next').addClass('disabled').bind('click.disabled', function() {
return false;
});
}
else {
$('#slide_nav .next').removeClass('disabled').unbind('.disabled');
}
}
或者,如果你想讓它回到週期(這是一個有點超出SCOP這個問題的E),你可以通過設置它的最後一個元素移動到開始的像這樣的東西left
CSS屬性:
function send_to_start($elm) {
var newPos = $('#slide_container li').eq(0).pos().left - $elm.outerWidth(true);
$elm.css('left', newPos+'px');
}
然後我會設立的事件,像這樣:
$('#slide_nav a').mouseenter(function() {
if ($(this).hasClass('disabled')) {
return false;
}
else {
var p = $(this).hasClass('prev') ? 'prev' : 'next';
showPreview(p);
}
}).mouseleave(function() {
cancelPreview($(this).hasClass('prev') ? 'prev' : 'next');
});
$('#slide_nav .prev').click(function() {
cancelPreview('prev');
if (hasPrev()) {
$('#slide_container li').slideMyDivs('prev').filter('.focused').removeClass('focused').prev().addClass('focused');
toggleLinks();
}
return false;
});
$('#slide_nav .next').click(function() {
cancelPreview('next');
if (hasNext()) {
$('#slide_container li').slideMyDivs('next').filter('.focused').removeClass('focused').next().addClass('focused');
toggleLinks();
}
return false;
});
這裏是由這些事件處理程序被稱爲雜項功能:
function showPreview(method) {
var p = method == 'prev',
$n = p ? $('#slide_container li.focused').prev() : $('#slide_container li.focused').next();
$n.addClass('previewActive')
.slideMyDivs((p ? 'prev' : 'next'), '75');
}
function cancelPreview(method) {
var p = method == 'prev';
$('#slide_container li.previewActive')
.removeClass('previewActive')
.slideMyDivs((p ? 'next' : 'prev'), '75');
}
function hasPrev() {
return $('#slide_container .focused').prev().length > 0;
}
function hasNext() {
return $('#slide_container .focused').next().length > 0;
}
function toggleLinks() {
if (!hasPrev()) {
$('#slide_nav .prev')
.addClass('disabled')
.bind('click.disabled', function() { return false; });
}
else {
$('#slide_nav .prev').removeClass('disabled').unbind('.disabled');
}
if (!hasNext()) {
$('#slide_nav .next').addClass('disabled').bind('click.disabled', function() {
return false;
});
}
else {
$('#slide_nav .next').removeClass('disabled').unbind('.disabled');
}
}
它工作正常,我在Firefox 10 ... – elclanrs 2012-02-07 16:54:19
我需要那件藍色的,當你將鼠標懸停在前面的路段o出現ñ紅色幻燈片 - 黑色是背景 – 2012-02-07 16:55:53
哦,沒有注意到...認爲這是幻燈片 – elclanrs 2012-02-07 16:59:08