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

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

javascript jquery html css

Javascript 如何在网页上制作用户控制的幻灯片,javascript,jquery,html,css,slideshow,Javascript,Jquery,Html,Css,Slideshow,我在自学如何建立网页。在我的代码中，我在顶部有一个幻灯片。它会自动更改图片。我想更改此功能，使其仅通过单击更改图片。我想在图片的两侧箭头上的上一个和下一个按钮。我该怎么做呢？以下是我目前的代码： HTML: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

我在自学如何建立网页。在我的代码中，我在顶部有一个幻灯片。它会自动更改图片。我想更改此功能，使其仅通过单击更改图片。我想在图片的两侧箭头上的上一个和下一个按钮。我该怎么做呢？以下是我目前的代码： 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!

尝试注释setTimeout；像这样：

或

被删除的语句将不会运行。setTimeout语句告诉脚本在2500毫秒后执行方法slideit

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

然后从HTML制作链接以控制幻灯片放映：

此外，将来还应该在脚本中的每条语句末尾加一个分号。你不必这么做，但这是一个很好的编程实践

希望这有帮助

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

第二，当用户单击按钮时使其滑动的方法是使用以下逻辑：当用户单击“上一步”按钮时，将步长减少1。当用户单击“前进”按钮时，将步长增加1

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

这应该能让它起作用。

听起来你已经回答了自己的问题。删除超时并将单击方法添加到下一个和上一个按钮。我还建议避免使用eval

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

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

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

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