第一次发帖,多多包涵
我正在尝试创建一个幻灯片:
- 为每个
<section>
分配一个 z-index - 将所有幻灯片的不透明度设置为 0.7
- 为当前最上面的幻灯片指定不透明度 1
这是 HTML:
<div id="slides">
<section class="slide">
<article>
<h1>6</h1>
</article>
</section>
<section class="slide">
<article>
<h1>5</h1>
</article>
</section>
<section class="slide">
<article>
<h1>4</h1>
</article>
</section>
<section class="slide">
<article>
<h1>3</h1>
</article>
</section>
<section class="slide">
<article>
<h1>2</h1>
</article>
</section>
<section class="slide">
<article>
<h1>1</h1>
</article>
</section>
</div>
<div id="prev">
<a href="#previous">←</a>
</div>
<div id="next">
<a href="#next">→</a>
</div>
到目前为止,这是 JS:
$(document).ready(function() {
var z = 0;
var inAnimation = false;
$('section.slide').each(function() {
z++;
$(this).css('z-index', z);
});
function swapFirstLast(isFirst) {
if(inAnimation) return false;
else inAnimation = true;
var processZindex, direction, newZindex, inDeCrease;
if(isFirst) {
processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1;
} else {
processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1;
}
$('section.slide').each(function() {
if($(this).css('z-index') == processZindex) {
$(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() {
$(this).css('z-index', newZindex)
.animate({ 'top' : '0' }, 'slow', function() {
inAnimation = false;
});
});
} else {
$(this).animate({ 'top' : '0' }, 'slow', function() {
$(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);
});
}
return false;
}
$('#next a').click(function() {
return swapFirstLast(true);
});
$('#prev a').click(function() {
return swapFirstLast(false);
});
});
});
我想我可以在脚本中插入以下代码:
if($(this).css('z-index') == processZindex) {
$(this).css('opacity', 1);
} else {
$(this).css('opacity', 0.7);
}
问题是我似乎无法获得 1 的不透明度来跟上 6 的 z-index 值。所以我考虑写 $(this).css('z-index') == processZindex
作为$(this).css('z-index') != 6
但问题出现了。
有没有更简单的编码方法?
最佳答案
我只是使用了元素的排序而不是 z-index,使用 appendTo
,preprendTo
:
http://jsfiddle.net/jtbowden/RAT8N/1/
我无法决定是一个功能更好还是单独的功能更好。这是两个独立的函数:
http://jsfiddle.net/jtbowden/5LJcA/3/
这就是你想要的吗?
关于javascript - 增加 z-index 和降低不透明度的幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10196045/