-7

「href」を含むタグの src をリンクタグから 5 秒ごとに変更したいと考えています。

これはコードです：

<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 に答える