I am working on a rotating image slideshow for the homepage of my site. The slide show functions properly but when I try to make each image linked to another page the slide show only repeats the first image over and over again. I will paste my code below please help if you can.

<style type="text/css">
#wrap {
height: 400px;
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;


#wrap img {
display: none;

#wrap .is-showing {
display: inline;

<div id="wrap">
<img src="scroll/home2.png" width="950" height="400" alt="image 1" class="is-showing" />
<img src="scroll/home1.png" width="950" height="400" alt="image 2" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">


function slideShow() {

var showing = $('#wrap .is-showing');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
* We could have written the above statement the long way to achieve the same results
* if(showing.next().length) {
* showing.next();
* } else {
* showing.parent().children(':first');
* }
showing.fadeOut(800, function() { next.fadeIn(800).addClass('is-showing'); }).removeClass('is-showing');

setTimeout(slideShow, 5000);


Please let me know if you have any suggestions on how I can get each image to be linked to another page on my site.