Question

我想复制淡入/淡出效果，使其位于图像的上方和下方[目前仅位于下方]但显示不同的文字

如果有相同的＆＃34; alt＆＃34;有没有办法阻止它淡入淡出？

这是我目前使用的javascript

    <script type="text/javascript" src="/wp-content/themes/child/script/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/script/carouFredSel.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
    var imgLength = jQuery('ul#fredsel img').length;
    jQuery('#totalImg').html(imgLength);
    jQuery('#imgCount').html(1);

    // Using custom configuration
jQuery("#foo1").carouFredSel({
    items: 1,
    align: false,
    auto    : false,
    width: 1500,
    onCreate: function(items) {
        var txt = "";
        items.each(function() { txt += "<li>" + jQuery(this).attr("alt").split("/").pop() + "</li>"; });
        jQuery("#foo1_log").html("<p>Carousel created showing images:</p><ul>" + txt + "</ul>");
    },
    scroll  : {
    items           : 1,
    duration        : 1000,
    pauseDuration   : 2000,
        onAfter : function(oldItems, newItems) {
            var txt = "";
            newItems.each(function() { txt += "<li>" + jQuery(this).attr("alt").split("/").pop() + "</li>"; });
            jQuery("#foo1_log").html("<p>Now showing images:</p><ul>" + txt + "</ul>");
        }
    },
    prev    : {
        button  : "#foo1_prev",
        onBefore: function() {
            jQuery("#foo1_log").html("<p>Started scrolling to the <strong>left</strong>.</p>");
        }
    },
    next    : {
        button  : "#foo1_next",
        onBefore: function() {
            jQuery("#foo1_log").html("<p>Started scrolling to the <strong>right</strong>.</p>");
        }
    }
});
});
</script>

这是我目前正在使用的HTML

<div class="image_carousel">
    <div id="foo1">
<img src="/wp-content/uploads/2011/07/Peregrine-Shot_03-4.png" alt="Project One" width="675" height="450" /><img src="/wp-content/uploads/2011/07/Peregrine-Shot_09-84.png" alt="Project One" width="300" height="450" /><img src="/wp-content/uploads/2011/07/Peregrine-Shot_10-192.png" alt="Project One" width="300" height="450" /><img src="/wp-content/uploads/2011/07/Peregrine-Shot_16-48.png" alt="Project Two" width="675" height="450" />
    </div>
    <div class="clearfix"></div>
    <a class="prev" id="foo1_prev" href="#"><span>prev</span></a>
    <a class="next" id="foo1_next" href="#"><span>next</span></a>
    <div class="logbox" id="foo1_log"><p>Click the previous- or next-button</p></div>
</div>

Answer 1

您需要阅读selectors by attributes，然后使用指向您想要的alt的选择器。

onBefore和onAfter函数

1 个答案: