建立具有滑動和不透明度效果的簡單jQuery 影像滑桿
在jQuery 中建立自訂影像滑桿而不依賴外部插件可提供更大的靈活性和控制。這是一種提供滑動和不透明過渡效果的簡化方法。
用於遍歷和操作的jQuery 函數
在深入程式碼之前，了解兩個關鍵的jQuery 函數至關重要:
不透明度效果
在不透明效果中，圖像使用 CSS 絕對定位和重疊。當您按一下觸發元素時，對應的圖像會淡入，而其他圖像則會淡出，這依賴於 jQuery 的 fadeIn() 和 fadeOut() 函數。
滑動效果
對於滑動效果，我們使用雙層包裝紙和遮罩技術。影像放置在遮罩區域內，透過在其上滑動遮罩來顯示特定影像，從而產生滑動過渡的錯覺。
常見jQuery 回應
不透明度和滑動效果共享一個共同的jQuery 回應，用於處理觸發器（導航元素）、下一個/上一個點擊事件與自動計時
HTML結構
<ul class="images">
<li>
<img src="images/1.jpg" alt="1" />
</li>
<li>
<img src="images/2.jpg" alt="2" />
</li>
...
</ul>
<ul class="triggers">
<li>1</li>
<li>2</li>
...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>不透明度效果程式碼
ul.images { position:relative; }
ul.images li { position:absolute; }var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
triggers.first().addClass('active');
images.hide().first().show();
function sliderResponse(target) {
images.fadeOut(300).eq(target).fadeIn(300);
triggers.removeClass('active').eq(target).addClass('active');
}滑動影響程式碼
.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden; }
ul.images { position:relative; top:0px;left:0px; }
/* this width must be total of the images, it comes from jquery */
ul.images li { float:left; }var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();
triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');
function sliderResponse(target) {
mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
triggers.removeClass('active').eq(target).addClass('active');
}滑動影響程式碼
triggers.click(function() {
if ( !$(this).hasClass('active') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
$('.next').click(function() {
target = $('ul.triggers li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
resetTiming();
});
$('.prev').click(function() {
target = $('ul.triggers li.active').index();
lastElem = triggers.length-1;
target === 0 ? target = lastElem : target = target-1;
sliderResponse(target);
resetTiming();
});
function sliderTiming() {
target = $('ul.triggers li.active').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },5000);
}以上是如何建立具有滑動和不透明度效果的簡單 jQuery 映像滑桿？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
