js slideshow

by James Doyle

HTML

<div id="wrapper">
    <ul id="grid">
        <li><img src="http://localhost:8888/3rd%20Year%20Javascript%20Gallery_StartFile/images/pic1.jpg" /></li>
    </ul>
</div>

CSS

#wrapper {
    margin: 0 auto;
    width: 505px;
    padding: 0 5px;
    height: 1000px;
    background: #333;
}

#wrapper ul {
    margin: 0;
    padding: 0;
}

#wrapper ul li {
    float: left;
    list-style: none;
    width: 150px;
    height: 110px;
    margin: 0 6px 10px;
    border: 3px solid white;
}

#wrapper ul li img {
    width: 100%;
}

JavaScript

var myImages = Array('http://localhost:8888/3rd%20Year%20Javascript%20Gallery_StartFile/images/pic1.jpg', 'http://localhost:8888/3rd%20Year%20Javascript%20Gallery_StartFile/images/pic1.jpg', 'http://localhost:8888/3rd%20Year%20Javascript%20Gallery_StartFile/images/pic1.jpg', 'http://localhost:8888/3rd%20Year%20Javascript%20Gallery_StartFile/images/pic1.jpg'),
    grid = document.getElementById('grid'),
    list = '';

for (var i = 0; i < myImages.length; i++) {
    list += '<li><img src=\"' + myImages[i] + '\" /></li>';
}

grid.innerHTML = list;