Question

我试图在不使用插件的情况下制作jQuery轮播。我已经遍布stackoverflow和谷歌，所有这些都有非活动图像关闭屏幕。我正在尝试创建一个带有三个图像的旋转木马，其中非活动图像保留在屏幕上并缩小一点。 *

按下右箭头时，左图像移动到中心，右图像移动到最左侧位置，中心图像移动到右侧，反之亦然。

我该怎么做呢？

像这样的http://jsfiddle.net/laelitenetwork/A2aZv/，除了它是水平的箭头并显示非活动图像。

对不起，如果我的语言不好，英语不是我的第一语言。

提前谢谢。

HTML

<div id="carousel">
<ul id="carouselNav">
    <li>
        <a href="#"><img src="http://placehold.it/300x150&text=Image 1" /></a>
    </li>
    <li>
        <a href="#"><img src="http://placehold.it/300x150&text=Image 2" /></a>
    </li>
    <li>
        <a href="#"><img src="http://placehold.it/300x150&text=Image 3" /></a>
    </li>
    <li>
        <a href="#"><img src="http://placehold.it/300x150&text=Image 4" /></a>
    </li>
</ul>
</div>

JS

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();
}
// 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');
    } else {
        // Rotate elements
        jQuery('#carouselNav li:visible').slideUp('fast').next('li:hidden').slideDown('fast');
    }
}
// Set Interval
var carouselScroll = setInterval(carouselSlide,carouselInterval);
// Pause on hover
jQuery('#carousel').hover(function() {
    clearInterval(carouselScroll);
}, function() {
    carouselScroll = setInterval(carouselSlide,carouselInterval);
    carouselSlide();
});
});

CSS

#carousel {
    text-align: center;
    background: #cdcdcd;
}
#carousel ul {
    list-style: none;
}
#carousel li {
    display: none;
}

jquery旋转木马仍然在屏幕上显示非活动图像

0 个答案: