我对 jQuery Carousel 脚本的更改/尝试可以在下面找到;然而令我沮丧的是,事件类没有正确附加,而只是始终显示第一个 <li>
一样活跃。我还希望能够“单击”每个 <li>
代表分页,以便可以转到该幻灯片。这是一个非常小的三图像轮播。请带上gandar来欣赏一下我的jFiddle .如果有任何有效的建议,请向您提出。
jQuery(document).ready(function(){
/**
* Check if first li element is hidden
* then show
*/
if( jQuery('.carouselNav li:first-child').is(':hidden') ) {
// Toggle visibility
jQuery('.carouselNav li:first-child').toggle();
jQuery('.carouselPagination li:first-child').addClass('active');
}
// Interval time
var carouselInterval = 5000;
// Slider
function carouselSlide(){
// Check if last element was reached
if( jQuery('.carouselNav li:visible').next().length == 0 ) {
// Hide last li element
jQuery('.carouselNav li:last-child').slideUp('fast');
// Show the first one
jQuery('.carouselNav li:first-child').slideDown('fast');
jQuery('.carouselPagination li:last-child').removeClass('active');
jQuery('.carouselPagination li:first-child').addClass('active');
} else {
// Rotate elements
jQuery('.carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
jQuery('.carouselPagination active').removeClass('active').next('li').addClass('active');
}
}
// Set Interval
var carouselScroll = setInterval(carouselSlide,carouselInterval);
// Pause on hover
jQuery('.carousel').hover(function() {
clearInterval(carouselScroll);
}, function() {
carouselScroll = setInterval(carouselSlide,carouselInterval);
carouselSlide();
});
});
最佳答案
代码中的一些小修复:
首先,您正在寻找具有“active”类的列表项,因此请确保第一个列表项具有“active”类。
<li class="active">
其次,“jQuery('.carouselPagination active')”在事件之前缺少点以按类名进行选择。
jQuery('.carouselPagination li.active').removeClass('active').next('li').addClass('active');
这是包含修复和点击功能的代码。代码很困惑,但它应该可以让您了解如何开始。 https://jsfiddle.net/x89wxoqu/
关于javascript - 检测 jQuery 轮播的事件 <li> (分页),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29219735/