Question

我想创建一个简单的javascript幻灯片，点击前后按钮，图片左右移动。代码如下。问题是我在浏览器中运行时没有显示任何内容。非常感谢帮助，我是javascript的新手

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Use function to create rollover</title>
<script>

var images=new Array('slideshow/example-slide-1.jpg','slideshow/example-slide-2.jpg','slideshow/example-slide-3.jpg');
var image_number=0;
var image_length=images.length-1;
function change_image(num){
    var image_number=image_number+num;
    if(image_number>image_length){
        image_number=0;
        }
    if(image_number<0){
        image_number=image_length;
        }
    return false;
    }

</script>

</head>

<body onload="change_image();">

<a href="creating-slideshow-new.html" name="slideshow" alt="slideshow"><img src="slideshow/example-slide-1.jpg" name="slideShow" width="940" height="529" /></a>


<a href"#"  onclick="javascript:change_image(1);" id="next"><td>Next</td></a>
<a href"#"  onclick="javascript:change_image(-1);" id="pre"><td>Pre</td></a>


</body>


</html>

Answer 1

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Use function to create rollover</title>
</head>

<script>

var images = new Array('slideshow/example-slide-1.jpg','slideshow/example-slide-2.jpg','slideshow/example-slide-3.jpg');
var image_number = 0;
var image_length = images.length-1;
function change_image(num){
    num = Number( num );
    image_number=image_number+num;
    if(image_number>image_length){
        image_number=image_length;
    };
    if(image_number<0){
        image_number=0;
    };
    document.getElementById("img").src = images[ image_number ];
};

</script>
<body onload="change_image(0);">

<a href="creating-slideshow-new.html" name="slideshow" alt="slideshow"><img id="img" src="slideshow/example-slide-1.jpg" name="slideShow" width="940" height="529" /></a>


<a href"#"  onclick="change_image(1);" id="next"><td>Next</td></a>
<a href"#"  onclick="change_image(-1);" id="pre"><td>Pre</td></a>`enter code here`

    enter code here

</body>

</html>

Answer 2

$(document).ready(function () {   
    SlideShow();
});

function SlideShow() {
    $('#slideshow > div:gt(0)').hide();

    setInterval(function () {
        $('#slideshow > div:first')
        .fadeOut(6000)
        .next()
        .fadeIn(6000)
        .end()
        .appendTo('#slideshow');
    }, 6000);
}

HTML

   <div id="slideshow">
  <div>
        <img src="images/Corolla.png" style="width:550px;height:250px" />
  </div>
    <div>
        <img src="images/harness.JPG" style="width:550px;height:250px" />
    </div>
    <div>
        <img src="images/Test.png" style="width:550px;height:250px" />
    </div>
    <div>
        <img src="images/1245.JPG" style="width:550px;height:250px" />
    </div>
    <div>
        <img src="images/pic1.JPG" style="width:550px;height:250px" />
    </div>
    <div>
        <img src ="images/pic2.jpg" style="width:550px;height:250px" />
    </div>
    <div>
        <img src="images/pic3.JPG" style="width:550px;height:250px" />
    </div>
    <div>
        <img src="images/pic4.JPG" style="width:550px;height:250px" />
    </div>  
</div>

在javascript中创建幻灯片

2 个答案: