添加幻灯片按钮 - jquery [英] Adding slideshow buttons - jquery

问题描述

我有这个非常简单的幻灯片： http://jsfiddle.net/Jtec5/2/

以下是代码：

HTML：

I have this very simple slideshow here: http://jsfiddle.net/Jtec5/2/
Here's the codes:
HTML:

<div id="slideshow">
    <div>
        <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
    </div>
    <div>
        <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
    </div>
    <div>
        <img src="http://gillespaquette.ca/images/stack-icon.png">
    </div>
</div>
<ul></ul>

CSS：

#slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

#slideshow img {
    max-width:240px;
    max-height:240px;
}

ul {
    list-style:none;
    margin:0px;
    padding:0px;
}
ul li {
    float:left;
    border-radius:10px;
    width:10px;
    height:10px;
    border:1px solid white;
    background:grey;
}
ul li.active {
    background:black;
}

Jquery：

$("#slideshow > div:gt(0)").hide();

var index = 1;
var maxindex = $('#slideshow > div').length;

setInterval(function () {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    $('ul li').removeClass('active');
    $('ul li:eq(' + index + ')').addClass('active');
    index = index < maxindex - 1 ? index + 1 : 0;
}, 3000);

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}

您可以在幻灯片中看到有按钮，告诉我在哪张照片，我试图关联每个按钮与其照片，所以当我点击它需要我的照片，如果改变按钮的整个代码需要它会更好，因为我不喜欢我的代码，我认为它太长了。

You can see in the slideshow there's buttons that tells me in which photo I am, I'm trying to relate every button with its photo so when I click it it takes me to its photo, if changing the whole code of the button is needed it will be better because I didn't like my code, I think it's too long.

推荐答案

我也做了一个小提琴，希望能做你想要的。 http://jsfiddle.net/L7s4e/
主要代码如下：

I've also made a fiddle which hopefully does what you want. http://jsfiddle.net/L7s4e/ The main code is as follows:

  $("#slideshow > div:gt(0)").hide();

  index = 0;
  maxIndex = $('#slideshow > div').length;

  $mainDiv = $('#slideshow div');
  for (var i = 0; i < maxIndex; i++) {
      var $li = $("<li/>", {
          "data-index": i,
          "class": (i == 0 ? 'active' : '')
      }).on("click",

      function () {
          /* uncomment below if you want slideshow to stop on selection
    to restart call startSlideshow();*/
          //clearInterval(intervalId);
          var imageIndex = $(this).data("index");
          $mainDiv.eq(index).fadeOut(1000);
          $mainDiv.eq(imageIndex).fadeIn(1000);
          index = imageIndex;
          $('ul li').removeClass('active');
          $('ul li:eq(' + index + ')').addClass('active');
      });

      $('ul').append($li);
  }

  function startSlideshow() {

      intervalId = setInterval(function () {
          $('#slideshow > div').eq(index).fadeOut(1000);
          index = index < maxIndex - 1 ? index + 1 : 0;
          $('#slideshow > div').eq(index).fadeIn(1000);
          $('ul li').removeClass('active');
          $('ul li:eq(' + index + ')').addClass('active');
      }, 3000);
  }

  startSlideshow();

希望它能按照你想要的方式工作。
R。

Hope it works as you wanted. R.

这篇关于添加幻灯片按钮 - jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！