我正在构建一个简单的滑动转盘,显示一个带3个屏幕的iphone。每次按下一个或上一个箭头时,它都会滑动到新图像。我有那个部分想通了,但我在每张幻灯片显示/隐藏文本时遇到问题。现在,所有三个文字说明都在显示。
$(function () {
var onSlide = 0;
var moveSlide = 0;
var imageWidth;
$('.iphone-overlay .nav-left')
.on('click', function () {
if (onSlide > -1) {
onSlide--;
doStuff();
};
})
$('.iphone-overlay .nav-right')
.on('click', function () {
if (onSlide < 1) {
onSlide++;
doStuff();
};
})
function doStuff() {
console.log(onSlide);
imageWidth = $('.banner-slider img').width();
moveSlide = (imageWidth / 3) * onSlide;
$('.banner-slider img').css('left', moveSlide);
}
});
这是我的jsfiddle:http://jsfiddle.net/WnQ7S/
任何帮助将不胜感激
答案 0 :(得分:0)
我玩了几个小时,然后想出了这个FIDDLE。
所有文字都隐藏在.holder中。
然后,当移动不同的图像时,等效文本将移动到图片下方的div中。
图像循环和计数的方式必须改变。
这是相关的JS
$(function () {
var onSlide = 0;
var moveSlide = 0;
var imageWidth;
$('.iphone-overlay .nav-left').on('click', function () {
onSlide = onSlide - 1;
if ( onSlide < 1 )
{
onSlide = 3;
}
doStuff();
});
$('.iphone-overlay .nav-right').on('click', function () {
onSlide = onSlide + 1;
if ( onSlide > 3 )
{
onSlide = 1;
}
doStuff();
});
function doStuff() {
console.log(onSlide);
imageWidth = $('.banner-slider img').width();
moveSlide = (imageWidth / 3) * onSlide;
$('.banner-slider img').css('left', moveSlide);
$('.putmehere').html('');
// alert(onSlide);
$('.putmehere').append( $('.holder .slide' + onSlide).html() );
}
});