Question

我搜索过，无法找到相关主题。我想在.next通过一堆周围的图像，这是我有jquerycode：

    function swapImages(){
  var $active = $('#slideshow .active');
  var $next = $active.next().length > 0 ? $active.next() : $('#slideshow a img:first');
  $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
  });
}
$(document).ready(function()
{
  // Run our swapImages() function every 5secs
  timerID = setInterval('swapImages()', 2000);

    $('#slideshow img').mouseover(function() {
        //$(this).addClass(' ');
        clearInterval(timerID);
    });
    $('#slideshow img').mouseout(function() {
        //$(this).addClass(' ');
        timerID = setInterval('swapImages()', 2000);
    });                              

});

我的HTML：

<div id="slideshow">
    <a href=""><img src="images/image1.jpeg" class="active" /></a>
    <a href=""><img src="images/image2.jpeg" /></a>
    <a href=""><img src="images/image.jpeg" /></a>
    <a href=""><img src="images/image1BW.jpeg" /></a>
    <a href=""><img src="images/image2BW.jpeg" /></a>
    <a href=""><img src="images/imageBW.jpeg" /></a>
</div>

如何选择具有锚标签的下一个img？

*编辑：它似乎在$active.next().length > 0;上失败，因为它在else语句中失败http://simpleburn.com/ctv/ffinn/4th/

img：first语句。我试过设置var $active = $('#slideshow a img.active');无济于事。

* 修改最终解决方案

<script>
function swapImages(){
  var $active = $('div#slideshow .active');
  var $next = $active.next().length > 0 ? $active.next() : $('#slideshow  img:first');
  $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
  });

    //alert(next);
}
$(document).ready(function()
{
      // Run our swapImages() function every 5secs
      timerID = setInterval('swapImages()', 2000);

    $('#slideshow img').bind({
        click: function(){
        window.location.href = '/shows/' + $j(this).attr('alt');
        },
        mouseenter: function(){
        //$(this).addClass(' ');
        clearInterval(timerID);
        }
    });
    $('#slideshow img').mouseout(function() {
        //$(this).addClass(' ');
        timerID = setInterval('swapImages()', 2000);
    });

});

</head>
<body>
    <div id="slideshow">
       <img src="images/image1.jpeg" alt="playerA" class="active"/>
       <img src="images/image2.jpeg" alt="playerB" />
       <img src="images/image.jpeg" alt="playerC" />
       <img src="images/image1BW.jpeg" alt="playerD" />
       <img src="images/image2BW.jpeg" alt="playerE" />
       <img src="images/imageBW.jpeg" alt="playerF" />
    </div>

Answer 1

类似的东西？

var next = $('#slideshow img').not('.active').attr('src');
alert(next);

不知道你的意思是什么bei锚标签到位了？

更新：替换标签（见评论，只是头脑风暴）

标记：

<div id="slideshow">
    <img src="images/image1.jpeg" class="active" alt="index-images-1.html" />
    ...

jQuery的：

$( '#slideshow img' ).live('click', function(){

   // if clicked ...
   // maybe you could give your images a 'alt' attr
   // that help to identify a link destination
   var hint = $(this).attr('alt');

   // then link out ...
   window.location.href = 'http://foo.com/' + hint;

})

Jquery .next到img的内部锚标签

1 个答案:

更新：替换标签（见评论，只是头脑风暴）