[英]Make image banner rotate automatically AND on click
I'm trying to create an image banner that changes on click AND rotates automatically. 我正在尝试创建一个图像横幅,该横幅在单击时会发生变化并自动旋转。 I was able to use what user Oriol added to a previous post, "Image Gallery Thumbnails Slider," and it worked perfectly.
我能够使用用户Oriol在上一篇文章“ Image Gallery Thumbnails Slider”中添加的内容,并且效果很好。 This is the original jsfiddle:
这是原始的jsfiddle:
http://jsfiddle.net/L7yKp/4/ 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();
});
I was able to customize it so that my banner changes when I click a thumbnail or previous/next button. 我能够对其进行自定义,以便在单击缩略图或上一个/下一个按钮时更改横幅。 So, my question is...
所以,我的问题是...
What can I add to this code to make the banner change automatically as well? 我可以在此代码中添加什么以使横幅也自动更改? Is there something I can just insert here?
我可以在这里插入什么吗?
You can use js setinterval to repeat the event of clicking the thumbnails. 您可以使用js setinterval重复单击缩略图的事件。
http://jsfiddle.net/L7yKp/99/ http://jsfiddle.net/L7yKp/99/
HTML HTML
<input type="checkbox" name="autoplay" value="autoplay" />autoplay
JS 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);
}
});
Like this? 像这样?
http://jsfiddle.net/samih/L7yKp/100/ http://jsfiddle.net/samih/L7yKp/100/
Added a settimeout function which triggers the click event on the next element. 添加了settimeout函数,该函数将触发下一个元素的click事件。 you can see it at the bottom of the javascript section.
您可以在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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.