js achieve a simple album

These days have been the most basic things in learning and review js, because the underlying bloggers very weak, it is a little bit of learning. .

Today, to achieve a simple album with js. See below

A lot like your mother's photo album or your mother's head. . . . Man of few words said on the code

<!DOCTYPE html>
<html>
    <head lang="en">
        <title>相册</title>
    </head>
    <body>
        <h2>相册</h2>
        <div id="imagegallery">
           <a href="1.jpg" title="图片A">
               <img src="1.jpg" width="100"<//>= "image 1"Alt 
           a>
           <a href="2.jpg" title="图片B">
            <img src="2.jpg" width="100" alt="图片2" />
           </a>
            <a href="3.jpg" title="图片C">
                <img src="3.jpg" width="100" alt="图片3" />
            </a>
            <a href="4.jpg" title="图片D">
                <img src="4.jpg" width="100" alt="图片4" />
            </a>
        </div>
        <div style="clear:both;"></div>
        <img id="image" src="1.jpg" alt="" width="450px" />
        <p id="des">选择一个图片</p>
        <script>
            imagegallery'document.getElementById (=imagegalleryvar1 acquires all the tag element corresponding to a@
            ' );
             Var links = imagegallery.getElementsByTagName ( ' a ' );
             // 2 to all of the tags registered a click event 
            var I =  0 ; len = links.length;
             for (; I < len; I ++ ) {
                 / / Get the current element 
                var Link = links [I]; 
                link.onclick =  function () {
                     // . 3 switching pictures and text 
                    var image = document.getElementById (' Image ' );
                     var des = document.getElementById ( ' des ' );
                     // set the picture 
                    's image.src =  the this .href; // this link can not be used in the implementation because the click event cycles have been carried over 
                    @ set text 
                    des.innerText =  the this .title
                     // cancel the default behavior is performed 
                    return  to false ; 
                } 
            } 
        </ Script > 
    </ body > 
</ HTML>

That's all content, which contains several points that basis, there are specific comments on the content of the above years.

js achieve a simple album

Guess you like