我正在尝试为移动网站创建一个小幻灯片。
这是html:
<div id="gallery">
<a id="prev" data-icon="arrow-l" data-iconpos="left" data-role="button" href="#">Previous Image</a>
<div class="gallery-pic">
<img class="slider" src="images/gallery/chateau-slider-1.jpg" />
</div>
<a id="next" data-icon="arrow-r" data-iconpos="right" data-role="button" href="#">Next Image</a>
</div>
这是jquery代码:
$(document).ready( function() {
var height = $('.slider').height();
$('.gallery-pic, .slider').css('min-height',height);
$('#prev').click(function(prev) {
prev.preventDefault();
var nameImg = $('img.slider').attr('src').split('/');
var fileName = nameImg[2].split('-');
var exp = fileName[2].split('.');
var numImg = parseInt(exp[0]);
if(numImg == 1) {
numPrevImg = 18; }
else {
var numPrevImg = numImg - 1; }
$('img.slider').fadeOut(500, function() {
$('img.slider').attr('src','images/gallery/chateau-slider-' + numPrevImg + '.jpg');
$('img.slider').fadeIn("slow");
});
});
$('#next').click(function(next) {
next.preventDefault();
var nameImg = $('img.slider').attr('src').split('/');
var fileName = nameImg[2].split('-');
var exp = fileName[2].split('.');
var numImg = parseInt(exp[0]);
if(numImg == 18) {
numNextImg = 1; }
else {
var numNextImg = numImg + 1; }
$('img.slider').fadeOut(500, function() {
$('img.slider').attr('src','images/gallery/chateau-slider-' + numNextImg + '.jpg');
$('img.slider').fadeIn("slow");
});
});
});
基本上,它搜索下一个图像并更改 src 属性。
容器(.gallery-pic)在 1/2 秒内变小,即使我使用了 min-height 属性。请注意,我在使用 Safari for iPhone 时遇到了这个问题。在浏览器中一切正常。
请帮帮我,我快疯了。
谢谢