助けてくれる人なら誰でも、画像配列を使用して簡単な JQuery スライドショーを作成しました。スライド ショーは完全に機能しますが、各スライド (画像) にリンクを追加したいだけです。「スライド」div の最初の画像、「joshuatreepic.psd」をアップロードしました。次に、スクリプトで 3 つの画像すべて (「joshuatreepic.psd」、「MSalbum.psd」、「scheduleslide.png」) を使用しました。これが私のコードです...
<div id='slides'>
<img src="joshuatreepic.psd" id="slideshow" />
</div>
<div id='nav_links'>
<ul id='list'>
<li class='active' id='0'><a href="#" onclick="skip_to(0)"><img src="grey-dot-
small.png" /></a></li>
<li id='1'><a href="#" onclick="skip_to(1)"><img src="grey-dot-small.png" />
</a></li>
<li id='2'><a href="#" onclick="skip_to(2)"><img src="grey-dot-small.png" />
</a></li>
</ul>
</div>
<p class="leftarrow"><a href="#" onclick="change_image(-1)"><img
src="slideshow_arrow_left.png"></a></p>
<p class="rightarrow"><a href="#" onclick="change_image(1)"><img
src="slideshow_arrow_right.png"></a></p>
</div>
<script type="text/javascript>
var Images = new Array("joshuatreepic.psd", "MSalbum.psd", "scheduleslide.png");
var Image_Number = 0;
var Image_Length = Images.length-1;
var Interval;
Interval = setInterval("change_image(1)", 5000);
function change_image(num) {
clearInterval(Interval);
$('#'+Image_Number).removeClass('active');
Image_Number = Image_Number + num;
if (Image_Number > Image_Length) {
Image_Number = 0;
}
if (Image_Number < 0) {
Image_Number = Image_Length;
}
$("#slideshow").fadeOut('slow', function () {
$('#slideshow').attr('src', Images[Image_Number]);
$("#"+Image_Number).addClass('active');
}).fadeIn('slow');
Interval = setInterval("change_image(1)", 5000);
}
function skip_to(Number){
$('#'+Image_Number).removeClass('active');
Image_Number = Number;
clearInterval(Interval);
$('#slideshow').fadeOut('slow', function (){
$('#slideshow').attr('src', Images[Image_Number]);
$('#'+Image_Number).addClass('active');
}).fadeIn('slow');
Interval = setInterval("change_image(1)", 5000);
}
function play() {
document.getElementById("play_stop").innerHTML = '<a
href="javascript:stop()">Stop</a>';
}
function stop () {
document.getElementById("play_stop").innerHTML = '<a
href="javascript:play()">Play</a>';
clearInterval(Interval);
}
</script>