Question

我正在教自己如何构建网页。在我的代码中，我在顶部有一个幻灯片。它会自动更改图片。我想更改此功能，以便它只通过单击更改图片。我想要图片两侧的箭头（上一个和下一个按钮）。我该怎么做呢？到目前为止，这是我的代码： HTML：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
     <!--This header links the html and css file.-->
    <link type="text/css" rel="stylesheet" href="StyleSheet1.css" />
    <title>First One!</title>
    <link href='http://fonts.googleapis.com/css?family=Signika:400,700,600' rel='stylesheet' type='text/css'>

</head>

<body>
    <!-- SCM Music Player http://scmplayer.net -->
    <script type="text/javascript" src="http://scmplayer.net/script.js"
            data-config="{'skin':'skins/scmOrange/skin.css','volume':50,'autoplay':false,'shuffle':false,'repeat':1,'placement':'bottom','showplaylist':false,'playlist':[{'title':'Rigamortus','url':'https://www.youtube.com/watch?v=sBvngg87998'}]}"></script>
    <!-- SCM Music Player script end -->
    <script type="text/javascript">
    var image1 = new Image()
    image1.src = "http://the305.com/blog/wp-content/uploads/2014/06/kendrick.jpg"
    var image2 = new Image()
    image2.src = "http://youheardthatnew.com/wp-content/uploads/2012/10/kendrick-lamar-complex-cover.jpg"
    </script>

    <img src="kendrick.jpg" name="slide" width="400" height="400" />
    <script type="text/javascript">
        var step = 1;
        function slideit() {
            document.images.slide.src = eval("image" + step + ".src")
            if (step<2)
                step++
            else
                step=1
            setTimeout("slideit()",2500)
        }
        slideit()
    </script>

    <link type="text/css" rel="stylesheet" href="StyleSheet1.css" />
    <div class="firsthalf">
        <h1>THIS IS THE WORLD OF KENDRICK LAMAR</h1>

        <!--links to music videos/drop-down-->
        <div class="menu">
            <ul><a href="http://www.youtube.com/watch?v=LuIUqIkDMY8"> She Needs me</a></ul>
            <ul><a href="https://www.youtube.com/watch?v=nLCqSMDEQsA">Swimming Pools</a></ul>
            <ul><a href="http://www.youtube.com/watch?v=sBvngg87998">Rigamortus</a></ul>
            <select>
                <option value="KDOT2">King</option>
                <option value="KDOT3">B/W</option>
                <option value="KDOT1">Complex</option>
            </select>
        </div>

        <img src="http://api.ning.com/files/ea4x8ggFHeL55kmzdIlO2E4lRQNnC*pvkD6nlB9cwVdAgUE8IIO5hhWVrhwbRI59GfJYpxySVIplT7VWsaLTq5BqRL7-WVFG/kendrick3lr_1.jpg" />
    </div>
</body>
</html>

CSS:
body {
    font-family: 'Signika', sans-serif;
    background-color: #f3871f;
    text-align: center;
}

.firsthalf h1 {
    border: 5px solid black;
}

.menu ul {
    display: inline;
}

Thank you!

Answer 1

尝试注释掉setTimeout（）;像这样：

// setTimeout("slideit()",2500);

或

/* setTimeout("slideit()",2500); */

不会运行任何声明的语句。 setTimeout（）语句告诉你的脚本在2500毫秒后执行“slideit（）”方法。

要添加点击功能，请在脚本中添加以下内容：

function changeSlide(direction) { 
    step+=direction;
    slideit();
}

然后从HTML制作链接来控制幻灯片：

<a onclick="changeSlide(-1)" href="#">go back</a>
<a onclick="changeSlide(1)" href="#">go forward!</a>

同样在将来，您应该在脚本中的每个语句的末尾加上一个分号。你不必这么做，但它是很好的编程习惯。

希望这有帮助！

Answer 2

首先，我建议您在每个javascript语句后添加分号。这通常可以解决问题。

其次，当用户单击按钮时使其滑动的方法是使用以下逻辑：当用户单击后退按钮时，逐步减少1。当用户单击前进按钮时，请逐步增加。

在上面的每个语句之后，运行slideIt（）函数而不使用timeout和if语句。不要忘记在document.images.slide.src之前添加if语句，以解决步骤为3或0时的情况。

这应该有效。

如何在网页上制作用户控制的幻灯片

2 个答案: