Question

我正在研究'小部件' - 我想这就是你所说的。

无论哪种方式，目的是让显示器在屏幕上嵌入幻灯片，并在显示相应图像时显示红色的计数器。此外，如果单击计数器，则应显示相应的图像，相关的计数器应变为红色 - 其他计数器必须保持蓝色。

我已经获得了幻灯片功能，但我已经集成的计数器让我疯了！当计数器显示相应的图像时，计数器通过添加类来变为红色;它做的。但是当你点击某个计数器时，其他人会假设他们已经删除了他们的类，而且点击的那个计数器会变成红色。

我希望我能解释得很好，这是我一直在努力的 jsFiddle 。

HTML

<div class="current">
<span id="Img1"></span>
<span id="Img2"></span>
<span id="Img3"></span>
</div>

<div id="monitor">
<div class="slideshow">
<img id="First"src="http://dummyimage.com/400x260/000/fff.png&text=Image+01" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+02" />
<img src="http://dummyimage.com/400x260/000/fff.png&text=Image+03" />
</div>
<div class="stand">
</div>

CSS

.slideshow {
    overflow: hidden;
    width: 550px;
    height: 300px;
    background-color: #000;
    border:10px solid black;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.slideshow img {
    width: 100%;
    height: 100%;
}
.current span{
    width:10px;
    height:10px;    
    display: inline-block;     
    background-color:blue
}
.current .red{
    background-color:red;    
}
.stand{
  width: 560px;
  height: 120px;
  background: url(http://i.imgur.com/pwzFcSZ.png) no-repeat;
  background-position:center;

}

JQUERY / JAVASCRIPT

var count = 1;
setInterval(function () {
    count = ($(".slideshow :nth-child(" + count + ")").fadeOut("slow").next().length == 0) ? 1 : count + 1;
    $(".slideshow :nth-child(" + count + ")").fadeIn("slow");
    $(".current :nth-child(" + count + ")").addClass("red")
        .delay(2000)
        .queue(function () {
        $(this).removeClass("red");
        $(this).dequeue();
    });
}, 2000);

$(".current span").click(function () {
    $(this).addClass("red");
    $(".slideshow :nth-child(" + count + ")").fadeOut();
    $(".slideshow #First").fadeIn();
});

Answer 1

删除类的简单一行：

$( ".current span" ).click(function() {
   /* remove red class  of others before applying red to active one*/
    $('.current .red').removeClass('red')
  /* adjust counter*/
   count= $(this).index()+1;

   $(this).addClass("red");   
   $(".slideshow :nth-child("+count+")").fadeOut();
   $(".slideshow #First").fadeIn();    
});

的 DEMO

Jquery幻灯片显示与当前图像对应的计数器

1 个答案: