不透明度で何をしようとしているのかわかりません。あなたは正しい Ollie です。質問で説明したのと同様の html 構造を使用する必要があります。このように:
<div class="mask">
<ul class="images">
<li style="display: none;">
<img border="0" usemap="#Map" src="images/image.png">
</li>
<li style="display: none;">
<img src="images/image1.png">
</li>
</ul>
</div>
<div class="pagination">
<ul class="triggers">
<li class="">1</li>
<li class="">2</li>
</ul>
</div>
上記の構造の CSS は次のようになります。
.mask {
float: left;
height: 156px;
margin-top: 10px;
overflow: hidden;
position: relative;
width: 822px;
}
ul.images {
left: 0;
position: relative;
top: 0;
}
ul.images li {
left: 0;
position: absolute;
top: 0;
}
ul.triggers {
left: 870px;
list-style: none outside none;
top: 250px;
}
ul.triggers li {
background-color: #000000;
color: #FFFFFF;
cursor: pointer;
float: left;
font: bold 10px arial;
margin: 0 3px;
padding: 2px;
}
ul.triggers li.selected {
background-color: #FFFFFF;
color: #000000;
}
これをスライド ショーとして機能させるスクリプトは、次のようになります。
$(document).ready(function(){
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var target;
triggers.first().addClass('selected');
images.hide().first().show();
function sliderResponse(target) {
images.fadeOut(300).eq(target).fadeIn(300);
triggers.removeClass('selected').eq(target).addClass('selected');
}
triggers.click(function() {
if ( !$(this).hasClass('selected') ) {
target = $(this).index();
sliderResponse(target);
resetTiming();
}
});
function sliderTiming() {
target = $('ul.triggers li.selected').index();
if ( target === lastElem ) { target = 0; }
else { target = target+1; }
sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
clearInterval(timingRun);
timingRun = setInterval(function() { sliderTiming(); },5000);
}
});
5000 を他の値に変更することで、時間間隔を増減できます。