Question

我正在尝试构建所有JQuery图像旋转器。

我知道简单的jquery滑块/旋转器，但我只想在JS中传递图像文件。

我不想这样做

 <div id="slider">
    <div class="content"><p>blah</p></div>
    <div class="content"><p>blah</p></div>
    <div class="content"><p>blah</p></div>
</div>

例如，我有这个简单的文本旋转器。现在我想用IMAGE文件替换TEXT。

我的文字旋转器是这样的：

jQuery(document).ready(function($) {$.fn.cycle = function(arr, options) {
    var settings = {
        'delay': 2000,
        'transitionDuration': 500,
        'transitionEasing': 'swing'
    };

    if (options) $.extend(settings, options);

    return this.each(function(ndx, el) {
        $(el).data('cycle:i', 0);
        setInterval(function(el, settings, arr) {
            $(el).fadeOut(settings['transitionDuration'], settings['transitionEasing'], function() {
                var t = $(this);
                var i = t.data('cycle:i');
                i = i == arr.length - 1 ? 0 : i+1;
                t.data('cycle:i', i)
                    .html(arr[i])
                    .fadeIn(settings['transitionDuration'], settings['transitionEasing']);
                });
        }, settings['delay'], el, settings, arr);
    });
};

将其称为

$('#textcontainer').cycle(['onetext', 'twotext', 'threetext', 'fourtext']);

现在我想在这里传递图像

$('#imagecontainer').cycle(['one.png', 'two.png', 'three.png', 'four.png']);

JS需要进行哪些修改？

更新：

根据Chaos的建议，我更新了代码.. 这是jsfiddle http://jsfiddle.net/n5XLf/

Answer 1

将文本写入DOM的代码行是

 .html(arr[i])

您只需将其切换为

即可

 .html('<img src="' + arr[i] + '"/>')

并将图像加载到容器中（假设输入数组是实际图像位置的数组）

jquery图像旋转器（仅在JS中传递图像）

1 个答案: