Question

HTML：

<div id='container'>
    <img id= 'img' src='images/pic1.jpg' name='slideshow'/>

    <button onclick='slide(-1)'>previous</button>

    <button onclick='slide(1)'>next</button>
</div>

尝试制作JavaScript幻灯片，但代码不起作用。我的代码出了什么问题？

JavaScript的：

var i = 0; 

var path = new Array(); 
path[0] = "images/pic1.jpg";
path[1] = "images/pic2.jpg"; 
path[2] = "images/pic3.jpg"; 

function slide(v) {
    var x = x + v;

    if(i < path.length){
        i = i - x;
    }
    if(i > path.length){
        x = path.length; 
    }

    document.slideshow.src = path[i];

Answer 1

试试这个：

<html>
<head>
    <script type="text/javascript">
        <!--
        var image1=new Image()
        image1.src="1.jpg"
        var image2=new Image()
        image2.src="2.jpg"
        var image3=new Image()
        image3.src="3.jpg"
        //-->
    </script>
</head>
<body>
    <img src="1.jpg" name="slide" width="500" height="250" />
    <script>
    <!--
    //variable that will increment through the images
    var step=1
    function slideit(){
    //if browser does not support the image object, exit.
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    if (step<3)
    step++
    else
    step=1
    //call function "slideit()" every 2.5 seconds
    setTimeout("slideit()",2500)
    }
    slideit()
    //-->
    </script>
</body>

Answer 2

如果仍然可以增加或减少

，则需要检查

var path = new Array(); 

path[0] = "https://www.mavericklabel.com/images/products/preprinted-stock/stock-label/color-coded/rectangle/rectangle-green-3x5-inch-200x200.png";
path[1] = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLNrcoSk41WfHji3m9JPbgWkdgPPstVtWfDLLUtcnEGloFwDNT"; 
path[2] = "http://www.dots-by-inlingua.com/img/intro/dot_7.png"; 

var x;
var i = 0; 
function slide(v) {

    if (v === -1) {
      if (i !== 0) i = i + v;
    }
    
    if (v === 1) {
      if (i < path.length -1) i = i + v;
    }

    document.slideshow.src = path[i]; 
}

的值

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='container'>
    <img id= 'img' src='https://www.mavericklabel.com/images/products/preprinted-stock/stock-label/color-coded/rectangle/rectangle-green-3x5-inch-200x200.png' name='slideshow'/>

    <button onclick='slide(-1)'>previous</button>

    <button onclick='slide(1)'>next</button>
</div>

{{1}}

我的代码有什么问题。 javascript幻灯片

2 个答案: