使图像横幅自动旋转并单击

Question

我正在尝试创建一个可在点击时更改并自动旋转的图片横幅。我能够使用用户 Oriol 在之前的帖子“图片库缩略图滑块”中添加的内容，并且效果很好。这是原始的 jsfiddle：

http://jsfiddle.net/L7yKp/4/

var xml = "<rss version='2.0'><channel>"+ 
"<image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>"+
"<image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>"+
"<image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>"+
"<limage>http://images1.videolan.org/images/largeVLC.png</limage>"+
"<limage>http://images1.videolan.org/images/largeVLC.png</limage>"+
"<limage>http://images1.videolan.org/images/largeVLC.png</limage>"+
"</channel></rss>",
$xml = $( $.parseXML(xml) ),
$images=$([
    //[elements, place, className],
    [$xml.find("image") ,"#thumbs",'thumbnails'],
    [$xml.find("limage"),"#panel" ,'largeimages']
]);
$images.each(function(){
    var that=this;
    that[0].each(function(){
        $(that[1]).append($('<img>', {class: that[2], src:$(this).text()}));
    });
});
$("#thumbs>img").click(function(){
    $("#thumbs>img.clicked").removeClass('clicked');
    $("#panel>img").hide();
    $("#panel>img:nth-child("+Number($(this).index()+1)+")").fadeIn();
    $(this).addClass('clicked');
});
$("#thumbs>img:first").click();
$('#next').click(function(){
    $('#thumbs>img.clicked').next().click();
});
$('#prev').click(function(){
    $('#thumbs>img.clicked').prev().click();
});

我能够对其进行自定义，以便在我单击缩略图或上一个/下一个按钮时更改我的横幅。所以，我的问题是……

我可以在此代码中添加什么以使横幅也自动更改？有什么我可以在这里插入的吗？

Answer 1

可以使用js setinterval来重复点击缩略图的事件。

http://jsfiddle.net/L7yKp/99/

HTML

<input type="checkbox" name="autoplay" value="autoplay" />autoplay

JS

function autoPlay() {
    var nextImg = $('#thumbs>img.clicked').next();
    if (nextImg.length == 0) {
        nextImg = $('#thumbs>img').eq(0);
    }
    nextImg.click();
}
var autoInterval;
$('input[type="checkbox"][name="autoplay"]').click(function () {
    if ($(this).is(":checked")) {
        autoInterval = setInterval(autoPlay, 2000);
    } else {
        clearInterval(autoInterval);
    }
});

Answer 2

像这样？

http://jsfiddle.net/samih/L7yKp/100/

添加了触发下一个元素的点击事件的 settimeout 函数。您可以在 javascript 部分的底部看到它。

var runSlideShow = function(){
    setTimeout(slideShow, 3000);    
};

var slideShow = function(){
var images = $('#thumbs>img');
for (var i=0; i<images.length; i++) {
    if ($(images[i]).hasClass('clicked')){
        if (i === images.length - 1){
            $(images[0]).trigger('click');
        }
        else {
            $(images[i+1]).trigger('click');
        }
        break;
    }
}
    runSlideShow();
};

runSlideShow();