我想创建一个翻转内容横幅。我设法找到一个与我想要的几乎相似但仍然有我想要的东西。是否可以在没有播放按钮的情况下使其自动播放,并且在到达最后一张幻灯片时保持向左滑动的效果回到第一张。有没有人可以帮忙?我 http://jsfiddle.net/4q3GZ/342/
$(document).ready(function () {
var height = 300,
width = 600,
tabs = 3,
$tabs = $('.tab'),
contentNum = 1,
delay = 2000, // time in milliseconds to pause between tabs
timer;
$('.play').click(function () {
var $t = $(this);
if($t.hasClass('playing')) {
// stop
clearTimeout(timer);
$t.removeClass('playing').html('play');
} else {
// play
timer = setInterval(function () {
contentNum++; // change to contentNum--; to go left
if(contentNum > tabs) {
contentNum = 1;
} // loop right
if(contentNum < 1) {
contentNum = tabs;
} // loop left
$tabs.eq(contentNum - 1).find('a').trigger('click');
}, delay);
$t.addClass('playing').html('stop');
}
});
$('.main_inner').css({
width: tabs * width
});
$('a.tab_link').click(function () {
$tabs.filter('.active').removeClass('active');
$(this).parent().addClass('active');
// make sure contentNum is a number and not a string
contentNum = parseInt($(this).attr('rel'), 10);
$('.main_inner').animate({
marginLeft: '-' + (width * contentNum - width)
}, 600);
return false;
});
$('.previous a').click(function () {
if(contentNum > 1) {
// find previous tab, trigger a click on the link
// subtract 2 because eq() uses zero based index
$tabs.eq(contentNum - 2).find('a').trigger('click');
}
return false;
});
$('.next a').click(function () {
if(contentNum < tabs) {
// find next tab, trigger a click on the link
// contentNum doesn't need + 1 because it is +1 relative to eq()
// which is a zero based index
$tabs.eq(contentNum).find('a').trigger('click');
}
return false;
});
});