我正在使用 jQuery 循环淡入/淡出我的幻灯片。
我的幻灯片有背景,它们在我的幻灯片中是半透明的 PNG(使用标签)。当幻灯片淡入时,半透明区域有黑色斑点。这些斑点在幻灯片完全淡入后消失。
我已经在 CSS 中使用 AlphaImageLoader 解决了这类问题,但这些不能是背景图像。
有什么想法吗?如果需要,我可以设置一个演示。
提前感谢您的帮助!
我已经对其进行了简化并在此处上传了一个示例:
http://dustland.markrichterjr.com/cycle/sample.html
HTML
<ul class="trending-slides">
<li>
<a href="#"><img src="assets/images/home-trending-phones.png" alt="Phones" /></a>
<div class="text">
<a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
<a class="learnmore" href="#">Learn More</a>
<p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut."</a></p>
</div>
</li>
<li>
<img src="assets/images/home-trending-tablets.png" alt="Tablets" />
<div class="text">
<div class="text">
<a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
<a class="learnmore" href="#">Learn More</a>
<p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut."</a></p>
</div>
</li>
<li>
<img src="assets/images/home-trending-accessories.png" alt="Accessories" />
<div class="text">
<div class="text">
<a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
<a class="learnmore" href="#">Learn More</a>
<p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut."</a></p>
</div>
</li>
<li>
<img src="assets/images/home-trending-support.png" alt="Support" />
<div class="text">
<a class="headline" href="#"><img src="assets/images/home-trending-headline.png" alt="" /></a>
<a class="learnmore" href="#">Learn More</a>
<p><a href="#">"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut."</a></p>
</div>
</li>
</ul>
CSS
.home-page-content .most-viewed .trending-slides, .home-page-content .most-viewed .trending-slides li {
width:630px;
height:124px;
margin:0;
padding:0;
overflow:hidden;
list-style:none;
background:transparent !important;
}
.home-page-content .most-viewed .trending-slides li {
background:url(../images/bg-home-trending.jpg) no-repeat 100% 0;
}
JavaScript
$('.home-page-content .most-viewed .trending-slides').cycle({
fx: 'fade',
before: function(currSlideElement, nextSlideElement) {},
speedIn: 250,
speedOut: 100,
after: function(currSlideElement, nextSlideElement) {
$('.text', nextSlideElement).show('fade', 125);
$('.text', currSlideElement).hide();
},
sync: false,
timeout: 0,
pagerEvent: 'mouseover',
pager: '.trending-nav',
pagerAnchorBuilder: function(idx, slide) {
// return selector string for existing anchor
return '.trending-nav li:eq(' + idx + ') a';
},
cleartype: true,
cleartypeNoBg: false
});