Using Jquery to alternate between images and their links

时间:2016-02-03 03:14:27

标签: javascript jquery html css

So i'm trying to loop through two divs (with images and links in each). I have managed to fade in and out each div as I can see the images alternating however the links don't alternate. My html is as follows:

<div class="fade1"><a href="link1"><img class="banner1" src="images/Home_Banner_1.jpg"></a></div>
<div class="fade2"><a href="link2"><img class="banner2" src="images/Home_Banner_2.jpg"></a></div>

css:

.fade1 {opacity: 0;}

and my jquery

<script>   
    $(document).ready(function() {
        function runIt () {
            var fade1 = $(".fade1");
            var fade2 = $(".fade2");

            fade1.delay(5000).fadeTo(3000, 1).delay(5000).fadeTo(3000, 0);
            fade2.delay(5000).fadeTo(3000, 0).delay(5000).fadeTo(3000, 1, runIt);
        }
        runIt();
    });
</script>

Thanks in advance for any and all help!

Edit:

So building off of the answer below I added callbacks to fade1.fadeTo both as the image opacity is turned on and as its turned off so that the href would be updated with the images.

fade1.delay(5000).fadeTo(3000, 1, function(){swap.attr("href",  link1)}).delay(5000).fadeTo(3000, 0, function(){swap.attr("href", link2)});

1 个答案:

答案 0 :(得分:0)

Give the links classes and edit the href attribute with $('.yourlinkclass').attr('href','yournewURL');