0

对于任何可以提供帮助的人，我使用图像数组创建了一个简单的 JQuery 幻灯片。幻灯片放映完美，但现在我只想为每张幻灯片（图片）添加链接。我刚刚上传了“幻灯片”div 中的第一张图片，即“joshuatreepic.psd”。然后我在脚本中使用了所有三个图片（“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>
4

0 回答 0