Question

我需要帮助我的幻灯片放映，我创建了一个幻灯片放映js然而，我有那些没有改变的图片只有第一个有标题，但所有其他图片没有显示任何标题。帮帮我们谢谢。

HTML CODE：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Slide Show</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="slide_show.js"></script>
</head>

<body>
<section>
    <h1>Dog Breed Slide Show</h1>
    <h2 id="caption">Afghan-Hound</h2>
    <img id="slide" src="images/dog0.jpg" alt="Afghan-Hound">
    <div id="slides"> 
        <img src="images/dog0.jpg">
        <img src="images/dog1.jpg" title="DOg MAn">
        <img src="images/dog2.jpg" alt="American-Eskimo">
        <img src="images/dog3.jpg" alt="French Bulldog">
        <img src="images/dog4.jpg" alt="German Shepard">
        <img src="images/dog5.jpg" alt="Italian-Greyhound">
        <img src="images/dog6.jpg" alt="Labrador Retriever">
        <img src="images/dog7.jpg" alt="Samoyed">
        <img src="images/dog8.jpg" alt="Siberian Husky">
        <img src="images/dog9.jpg" alt="Basset-Hound">
    </div>


    <div id="buttons">
        <input type="button" id="prev" value="Previous" onclick=showPrev()>
        <input type="button" id="pause" value="Pause" onclick=showStop()>
    <input type="button" id="play" value="play" onclick=showAuto()>
        <input type="button" id="next" value="Next" onclick=showNext()>         
    </div>
</section>
</body>
</html>

这是CSS代码：

body {
    font-family: Arial, Helvetica, sans-serif;
    width: 380px;
    height: 350px;
    margin: 0 auto;
    padding: 20px;
    border: 3px solid blue;
}
h1, h2, ul, p {
    margin: 0;
    padding: 0;
}
h1 {
    padding-bottom: .25em;
    color: blue;
}
h2 {
    font-size: 120%;
    padding: .5em 0;
}
img {
    height: 250px;
}
#slides img {
    display: none;
}
#buttons {
    margin-top: .5em;
    text-align: center;
}

以下是JavaScript代码：

var curimage=0;
    var frequency=2000; 

    function showSlideNum()
    {
        document.getElementById('slides').value=curimage.alt;

    }

    function showNext()
        {
        curimage++;
        if (curimage>9)
            {curimage--;
            alert('This is last picture in the catalog');
        }
        document.images.slide.src='images/dog'+curimage+'.jpg';
        showSlideNum();
        }


    function showPrev()
        {
        curimage--;
        if (curimage<0)
            {curimage++;
        alert('There is no more picture before this one!!!');

            }
            document.images.slide.src='images/dog'+curimage+'.jpg';
            showSlideNum();
            }
    function clearImage()
        {
        curimage=0;
        showSlideNum();
        }
    function setfrequency(newFrequency)
    {
        frequency=newFrequency;
        alert(frequency);
    }

    function showAuto()
    {
    curimage++;
    if (curimage>9)
        {
        curimage=0
        }
    document.images.slide.src='images/dog'+curimage+'.jpg';
    showSlideNum();
    setTimeout('showAuto()', frequency);
    }

    function showStop()
    {
    document.location=document.location;
    }

这是小提琴：https://jsfiddle.net/143sayed/d7LyjmLg/4/#&togetherjs=FjdTRl0FTe

提前非常感谢你。

带有标题功能的JavaScript幻灯片放映

0 个答案: