简体   繁体   中英

JavaScript function not work onload

I have write a JavaScript code to perform a slide show but it's not working onload when i assign it to a <a> it works but not work onload

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Slide Show</title>
        <meta name="author" content="Jenz" />
        <!-- Date: 2014-07-18 -->
        <script>
            var slideImg;
            var picNo = 0;
            window.onload = function() {
                slideImg = document.getElementById('slideShowImage');
                images = new Array();
                images[0] = new Image();
                images[0].src = "Images/image1.jpg";
                images[1] = new Image();
                images[1].src = "Images/image2.jpg";
                images[2] = new Image();
                images[2].src = "Images/image3.jpg";
            };
            function slide() {
                slideImg.src = images[picNo].src;
                if (picNo < 2) {
                    picNo++;
                } else {
                    picNo = 0;
                }
                timer = setTimeout(slide, 1000);
            };
        </script>
    </head>
    <body>
        <div style="margin-left: auto; margin-right: auto; width: 900px">
            <div id="slideShowAndNav" style="margin: auto; width: 700px;">
                <img id="slideShowImage" name="slideshow" src="Images/image1.jpg" style="border-radius: 0px 0px 0px 250px; position: absolute; top: -50; left: -50; z-index: 1;" border="1px" />
                <a style="display: block; height: 40px; width: 40px; background-color: red; border-radius: 20px; text-align: center; position: absolute; z-index: 2; margin-top: 130px;" href="">Home</a>
            </div>
        </div>

    </body>
</html>

Please look at the code and tell me what should i do and other thing i have a navigation which code is

<a style="display: block; height: 40px; width: 40px; background-color: red; border-radius: 20px; text-align: center; position: absolute; z-index: 2; margin-top: 130px;" href="">Home</a>

i want this <a> in a circle as i did with border-radius and now i want it's Text in the center like Home in the middle of the circle help me also with this

i want this in a circle as i did with border-radius and now i want it's Text in the center like Home in the middle of the circle help me also with this

For this, use:-

 style="border-radius:100px; text-align:center;" 

The " xmlns " attribute is invalid in HTML 4.01. (You can change your doctype.)

Also, it is more common practice to create your function.

function blaah(blaah){
blaah
}

And then add an onload event handler, either with an event listener , or add this code to your body tag,

<body onload="blaah('blaah')">

or, you could add this code in your script tags, but outside of the function.

blaah("blaah");

Call slide function.

window.onload = function() {
                slideImg = document.getElementById('slideShowImage');
                images = new Array();
                images[0] = new Image();
                images[0].src = "Images/image1.jpg";
                images[1] = new Image();
                images[1].src = "Images/image2.jpg";
                images[2] = new Image();
                images[2].src = "Images/image3.jpg";
                slide();
            };

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM