Question

我已使用carousel from Malsup在我的网页上添加轮播。另外我想要做的是自动将每个图像的文件名添加到动态传送到轮播的图像中。我定期更改图像，其中的图像数量也可以更改。如果有人可以建议将每个图像的文件名添加到图像的底部（可能叠加在图像上），或者在图像下方的空格中出现“Alt”名称，我将非常感激。

提前感谢你们给予的任何帮助干杯，大卫

标记如下：

    <div id="slideshow" class="pics">
        <img src="sliderimages/ride_4481.jpg" width="400" height="300" /> 
        <img src="sliderimages/ride_4482.jpg" width="400" height="300" />

使用CSS样式如下：

     .pics {
            height: 332px;
            width: 432px;
            padding: 0;
            margin: 10px auto;
            display: block;
            border: 1px solid #ccc;
            border-radius: 8px;
        } 

        .pics img {
            padding: 15px;
            border: 1px solid #ccc;
            background-color: #eee;
            width: 400px;
            height: 300px;
            top: 0;
            left: 0;
            border-radius: 8px;
        }

运行幻灯片的脚本是（有很多评论作为提醒：

    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>

    <script type="text/javascript"> 

    $(document).ready(function() { 
        // start slideshow 
        $('#slideshow').cycle({ 
                fx:      'cover',
            easing: 'easeOutBounce',
            pause: 1,
            speed: 1000,
                timeout:  1500,
            before:   onBefore 
        }); 

        var slidesAdded = false; 

        function onBefore(curr, next, opts) { 
            // Make sure not to call addSlide before it is defined 
            if (!opts.addSlide || slidesAdded) 
                return; 
            // Add slides for images 3 - 8 or whatever number of slides you want to add. Just amend the var i=3; < x; i++ functions below where x is any number.
            // Also ensure you have this number of pictures available or you will get grey placeholders instead!
                // Slides can be a DOM element, a jQuery object, or a string 
             for (var i=3; i < 3; i++) 
             opts.addSlide('<img src="sliderimages/ride_448'+i+'.jpg" width="400" height="300" />');
            slidesAdded = true; 
        }; 
    });

</script>

Answer 1

您需要使用after:事件来设置替换字幕文本的功能。以下代码取自http://jquery.malsup.com/cycle/caption.html

$('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    after:     function() {
        var name = this.src.split('/');
        $('#caption').html(name[name.length-1]);
    }
});

<强> Working Demo

我不完全确定您的其他JavaScript正在做什么。为什么要在旋转木马的事件前添加图像？

如果你想把图像替换成文件名，那么使用这段代码：

$('#slideshow img').each(function( index ) {
    var name = this.src.split('/');
    this.alt = name[name.length-1];
});

$('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    after:     function() {
        //use the alt tag of the image, which we previously set to the filename above
        $('#caption').html(this.alt);
    }
});

<强> Working Demo

我猜测JavaScript onBefore函数正在向滑块添加图像，我不知道为什么，因为你可以在html标记中定义图像开始。如果由于某种原因（也许你首先通过ajax请求图像）。我也添加了 working demo 。

修改

看到另一个问题突然关闭......

为了设置不同的图像集，有两种方法可以做到。这都是设置数组的问题，或者最好是描述图像集的JSON或者（最好）通过选择图像集的Ajax请求延迟加载数据。我已经向您展示了基本阵列设置。

使用JSON，您可以定义所有游乐设施 - http://jsfiddle.net/f9g5G/10/：

var pictures = { ride_443: { ride: 443, linkText: "443", images: [ "images/medium/ride_443%20(1).jpg", "images/medium/ride_443%20(2).jpg", "images/medium/ride_443%20(3).jpg", "images/medium/ride_443%20(4).jpg", "images/medium/ride_443%20(5).jpg" ] }, ride_425: { ride: 425, linkText: "443", images: [ "images/medium/ride_425%20(1).jpg", "images/medium/ride_425%20(2).jpg" ] }, ride_plentong2013: { ride: "plentong2013", linkText: "Plentong 2013", images: [ "images/medium/plentong1.jpg", "images/medium/plentong2.jpg", "images/medium/plentong3.jpg" ] } }

或者您可以使用AJAX加载它们。我将使用现有的XML点作为示例，但请注意，由于Same Origin Policy我必须模拟AJAX调用，所以我将注释放入其中，所以如果您有疑问请告诉我。我假设标记的锚链接将从服务器代码而不是jQuery生成，以匹配您当前在页面上的布局并按年份分组。

http://jsfiddle.net/QzbZ7/

var getSliderData = function(group) { $.ajax({ url: "/gallery/ride_" + group + "/resources/group.xml", dataType: "xml", success: function(data) { setUpSliders($(data), group); } }); }; //create the slider var setUpSliders = function($data, group) { var imgBase = "/gallery/ride_" + group + "/resources/"; $description.html($data.find("galleryDescription").text()); $data.find("mediaGroup > media > item").each(function() { var $this = $(this); $slideshow.append( $('<img>', { src: imgBase + $this.find("renditions > rendition[size=medium]").attr("src"), alt: $this.find("title").text() }) ) }); //set up the slider $slideshow.cycle({ fx: 'fadeZoom', timeout: 2000, before: function() { $caption.hide(); }, after: function() { $caption.html(this.alt).fadeIn(); } }); }; //set up initial slider: var initialSlider = 443; getSliderData(initialSlider);

Answer 2

对于html来说这是怎么回事：

<div id="slideshow" class="pics">
    <div id="caption"></div>
    <img src="sliderimages/ride_4481.jpg" width="400" height="300" /> 
    <img src="sliderimages/ride_4482.jpg" width="400" height="300" />

然后JS，而不是：

for (var i=3; i < 3; i++) 
         opts.addSlide('<img src="sliderimages/ride_448'+i+'.jpg" width="400" height="300" />');
        slidesAdded = true;

你可以采用更自动的方式

$(".pics img").each(function(){
$(this).attr("alt", $(this).href)
opts.addSlide($(this));
});

然后你可以添加jammycam建议的内容

    $('#slideshow').cycle({
    fx:       'fadeZoom',
    timeout:   2000,
    after:     function() {
        $('#caption').html(this.alt);
    }
});

如何将图像文件名添加到轮播中动态添加的图像

2 个答案: