0

I'm working on a 'widget' - i guess that's what you'd call it.

Either-way, the aim is to have a monitor which has an slideshow embedded onto the screen, with a counter which is red when the corresponding image is displayed. Also, if a counter is clicked, the corresponding image should display and the relevant counter should turn red - the other counters must stay blue.

I have gotten as far as having the slideshow functionality, but the counter i have integrated is driving me nuts! The counter is suppose to turn red, by adding a class, when the counter is displaying the corresponding image; which it does. But when you click a certain counter, the others are suppose to have their class removed and the one which is clicked is suppose to turn red.

I hope i'm explaining things well, here's the jsFiddle i've been working on.

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();
});
4

1 回答 1

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

于 2013-10-28T16:36:58.153 回答