我们已经有一个应用程序,它已经通过上滑动画实现。但是,现在我们想要改变它以滑动右侧动画。我们想要显示内容的显示幻灯片。我需要在现有代码中改变什么呢?
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption')) ?
$('#gallery a:first') : current.next()) : $('#gallery a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({
opacity: 0.0
})
.addClass('show')
.animate({
opacity: 1.0
}, 1000);
//Hide the current image
current.animate({
opacity: 0.0
}, 1000)
.removeClass('show');
//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({
opacity: 0.0
}, {
queue: false,
duration: 0
}).animate({
height: '1px'
}, {
queue: true,
duration: 300
});
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({
opacity: 0.7
}, 100).animate({
==> height: '20px'
}, 500);
//Display the content
$('#gallery .content').html(caption);
}
此代码可以上传内容。我试过放置,
right: '700px', in the line marked with ==>
在这种情况下,似乎第二个内容就是从右到左。 任何帮助都非常重要。
由于
答案 0 :(得分:0)
在第42行尝试将行height: '1px'
替换为width: '1px'
。只是一个想法,不能保证它会起作用。