-7

我想每 5 秒从链接标签中更改带有“href”的标签的 src。

这是代码：

<div id="bgStretch"><img id="bgStretchimg" src="images/picture1.jpg" alt=""></div> <!--   here is the image src i want to change-->

<nav class="bgNav">
 <ul>
  <li class="active"><a href="images/picture1.jpg"></a></li>
  <li><a href="images/picture2.jpg"></a></li>
 </ul>
</nav>
<!--these are the links so i hope you guys to gimme a solution in javascript-->

这是我试过的jQuery：

<script>
  $(document).ready(function() {
    var items = $("nav.bgNav ul li");
    var index = -1;

    function next() {
        // if not the very first iteration, 
        // remove the active class from prev item
        if (index !== -1) {
            var urlI=$(this).("a").attr(href);
            items.eq(index).removeClass("active");
        }
        // go to next item
        ++index;
        // if past end, wrap to beginning
        if (index >= items.length) {
            index = 0;
        }
        // add active class to next item
        items.eq(index).addClass("active");
    $('#bgStretchimg').attr('src', urlI);
        // schedule next iteration
        setTimeout(next, 1000);
    }

    next();
});

</script>

它不适合我，所以我问你们，谢谢。

4

1 回答 1

1

抱歉，如果花了很长时间！

这是一个有效的 JsFiddle！

$(document).ready(function () {

     var items = $("nav.bgNav ul");
     var img = $("#bgStretchimg");

     next();

     function next() {

         var urlI = items.children('.active').children("a").attr('href');

         var nextI = items.children('li.active').removeClass("active").next();
         if (nextI.length == 0) {
             nextI = items.children().eq(0);
         }

         nextI.addClass('active');
         img.attr('src', urlI);

         // schedule next iteration
         setTimeout(function () {
             next();
         }, 2000);
     }
 });

如果你想在第一次调用之前有一个延迟，你可能想把它放在 setTimeout 中，就像它在函数中一样，所以它在第一次更改之前等待。

// in document ready directly
setTimeout(function () {
    next();
}, 2000);

可能还想寻找一个已经像这样构建的插件：jQuery Cycle

于 2013-03-19T21:12:51.897 回答