如何使用纯JavaScript制作简单的图库

Question

I am new to javaScript and i tried to make a photo gallery for practice purpose.I don't know about jQuery so i dont want to use it right now Most of the stuff on Internet is using JQUERY.

I want to slide the image, using Next image button but

1. when i click the first img tag ,it works fine.
2. when i click on second input tag same image comes again .

Whats the Difference between these two tags. Function is being called.I have checked using alert . and it is uncaught reference error

I Searched a lot after a lot of alterations my code is like this Script:

 <script type="text/javascript">
    var k = 0;
    var imageName = new Array(6);
    imageName[1] = "1.jpg";
    imageName[2] = "2.jpg";
    imageName[3] = "3.jpg";
    imageName[4] = "4.jpg";
    imageName[5] = "5.jpg";
    imageName[6] = "6.jpg";

      function NextImage(){

        if (k == 6) {
            k = 0;
        }
        k++;
        document.getElementById("imagebox").src =imageName[k];

    }
</script>

html:

<form id="form1" runat="server">
<div>
<img id="picbox" src="1.jpg" height="500" width="500" alt="iMAGE NOT FOUND" />
<img src=green-next-button.jpg onclick="javascript:NextImage()" />
<input type="image" onclick="NextImage()" src=green-next-button.jpg />

</div>

Kindly Trace the problem in code .Thanks in Advance. Debugging is Disabled due to some Web.config file and it is also recommended . Kindly help me how to Debug Html tags.

Answer 1

Javascript at this level is extremely easy to debug using a client-side debugger. This kind of function is something everyone should learn to use as part of learning Javascript.

For firefox, here is the addon you can download to your browser to add a debugger: https://addons.mozilla.org/en-US/firefox/addon/firebug/

For Chrome the Chrome developer tools are a good place to start, click CTRL+SHIFT+J to get the javascript console. Here is an explanation for how Javascript debugging in Chrome is done:

https://developers.google.com/chrome-developer-tools/docs/javascript-debugging

Answer 2

Here is a tutorial that may help to teach you how to build one yourself.

http://jjames.info/Tutorials/Tutorial1/tutorial1.php .

On this page is a simple tutorial teaching how to create a Javascript image gallery that you may be able to use or may be able to help you understand how to create one yourself.

Answer 3

Since you have no experience I would take the easy way and just find a library. Use google and you find multiple. If you are going to start from scratch it will take you a lot of time.

Still want to continue? Then also learn debugging your code. place a console.log(imagename[k]) on the place where you alter the image tag. If you see different image names then the problem lies in your images itself.