Question

我创建了一个无限轮播滑块，带有淡入和淡出效果的文字。所以，我有5张图片，它们的宽度等于屏幕宽度，在它们上面的文字褪色后向右滑动，然后下一张图像上方的另一个文字淡入。

目前，我有一个来自所有图像的文本课程，当我淡入淡出时，它们都会淡入淡出，即使我只能看到一个图像。

我想将淡入淡出效果仅应用于当前图像上的文本，但我不知道如何在javascript中选择它以及我应该使用哪些类。

我在想，对于每个文本元素，我应该给出一个名为“content1”，“content2”等类的类，但是我怎么知道我应用哪个类的效果呢？

JavaScript的：

$(document).ready(function() {
        var auto_slide_seconds = 4000;
        init();
        setInterval(function(){slide("right");}, auto_slide_seconds);
});

function init() {
    var img = $('.homepage-img')
        content = $('.slider-content')
        img.width($(window).width())
        $("li").width($(window).width())
        img.height($('.slider-list').height())
        content.height($('.slider-list').height())
}

function slide(where){
    if(where === 'left') {
        switchLeft();
    }
    fadeOutContent(where); 
}

function fadeOutContent(where) {
    $('.slider-content').animate(
        { 'opacity': 0 },
        1000, 
        function(){ animateSlider(where) }
    );
}

function animateSlider(where) {
    var itemWidth = $('.slider-list li').outerWidth();
    if(where === 'right'){
        itemWidth = -itemWidth;
    }

    $('.slider-list').animate(
        { 'margin-left' : "+=" + itemWidth },
        1000,
        function(){ fadeInContent(where) }
    );
}

function fadeInContent(where) {
    if(where === 'right') {
        switchRight()
    }

    $('.slider-content').animate({
        'opacity': 1
    }, 1000);
}

function switchLeft() { 
    $('.slider-list li:first').before($('.slider-list li:last'));
    $('.slider-list').css({'margin-left': - $('.slider-list li').outerWidth()});
}

function switchRight() {
    $('.slider-list li:last').after($('.slider-list li:first'));
    $('.slider-list').css({'margin-left': 0});
}

HTML：

<ul class="slider-list">
            <li><img class="homepage-img"src="images/homepage.jpg">
                <div class="slider-content content1">
                    <h1>Crowdfunding romanesc</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>      
            </li><!--
         --><li><img class="homepage-img"src="images/image1.jpg">
                <div class="slider-content content2">
                    <h1>Crowdfunding englezesc</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>      
         </li><!--
         --><li><img class="homepage-img"src="images/image2.jpg">
                <div class="slider-content content3">
                    <h1>Crowdfunding frantuzesc</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>
         </li><!--
         --><li><img class="homepage-img"src="images/image3.jpg">
                <div class="slider-content content4">
                    <h1>Crowdfunding german</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>
            </li><!--
         --><li>
                <img class="homepage-img"src="images/image4.jpg">
                <div class="slider-content content5">
                    <h1>Crowdfunding american</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>
            </li>
        </ul>

Answer 1

我通常做的是保留一个代表轮播当前幻灯片的变量index：

var index = 0;
function slide(where){
    if(where === 'left') {
        switchLeft();
        index--;
    } else {
        index++;
    }
    showCurrentTitle();
    fadeOutContent(where); 
}

function showCurrentTitle = function() {
    $('.slider-content h1').hide().eq(index).show(); //you might want to cache the selector and use animations instead of hide and show
}

带淡入淡出动画的jQuery轮播滑块

1 个答案: