0
jQuery를 사용하여 이미지 슬라이드 쇼를 만들었습니다. 이미지는 서로간에 사라집니다. 각 이미지에는 캡션이 있고 각 이미지에는 자체 div가 있습니다. 이미지가 흐려짐에 따라 관련 자막이 위로 올라갑니다. 캡션은 투명하게 만들어졌으며 IE를 제외한 모든 브라우저에서 작동합니다.jQuery Image Slideshow : IE에서 캡션이 투명하지 않습니다.
웹 사이트는 http://mtsoc.enfotext.com
합니다 (슬라이드 쇼 중 하나) 자바 스크립트에서 찾을 수 있습니다 :
function slideShow() {
//Set the opacity of all images to 0
$('#mainfeature a').css({
opacity: 0.0
});
//Get the first image and display it (set it to full opacity)
$('#mainfeature a:first').css({
opacity: 1.0
});
//Set the caption background to semi-transparent
$('#mainfeature .caption').css({
opacity: 0.7
});
//Call the gallery function to run the slideshow
setInterval('main_gallery()', 8000);
}
function main_gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#mainfeature a.show') ? $('#mainfeature a.show') : $('#mainfeature 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')) ? $('#mainfeature a:first') : current.next()) : $('#mainfeature a:first'));
//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
$('#mainfeature .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
$('#mainfeature .caption').animate({
opacity: 0.7
}, 100).animate({
height: '50px'
}, 500);
}
는 CSS는 다음과 같습니다
#mainfeature.feature {
color: #fff;
display: block;
position: absolute;
overflow: hidden;
z-index: 1;
}
#mainfeature.caption {
background: #333;
padding: 10px;
position: absolute;
left: 0;
bottom: 0;
z-index: 600;
height: 50px;
opacity: 0.7;
filter: alpha(opacity = 70);
width: 575px;
}
html로는 다음과 같습니다
<div id="mainfeature">
<a href="#" class="show feature">
<img src="<?php bloginfo('template_directory'); ?>/images/12.jpg" />
<div class="caption">
<span class="tag">Spring Show</span>
<span class="title">A Funny Thing Happened on the Way to the Forum</span>
<span class="detail">Through June 15</span>
</div>
</a>
... more slides...
</div>
어쨌든, 긴 질문, 많은 정보. IE에서 캡션이 투명하지 않은 이유는 누구나 알 수 있습니까?
감사합니다.