Question

你好我有一个滑块小提琴使用另一个stackoverflow问题的

target = $('ul.triggers li.selected').index();
target === lastElem ? target = 0 : target = target+1;
sliderResponse(target);

我想要的是将此滑块变为连续滑块而不会在结束后返回第一个项目

我希望有人可以向我解释如何使用克隆进行此操作，因为我不明白这个想法

ps不需要任何滑块我需要代码因为我正在构建自定义

提前谢谢

Answer 1

我已更新您的 fiddle ，以便它仍继续播放，因此如果您点击幻灯片，它将继续播放滑块，否则它将无法循环播放。< / p>

关键代码是sliderTiming()函数：

if (target < lastElem) {
    sliderResponse(++target);
}

这意味着sliderResponse（触发滑动）只会在当前幻灯片不是最后一张时发生。

++target表示＆＃34;将1添加到目标，然后在上下文中使用它＆＃34; （在上下文中，它作为参数传递）。

Answer 2

好吧，看来你的意思是无限卷轴。我很快就尝试了并且做到了

http://jsfiddle.net/samirkumardas/yznfmLs9/5/

少数事情：

对于无限卷轴，最好使用全局变量来维护current幻灯片编号。为简单起见，我使用了auto_target而不是变量target。
方法是复制前1个或2个幻灯片（取决于遮罩宽度）并将它们附加到滑块容器的末尾（附加到UL）
当滑块到达最后一张幻灯片时，将滑块移动到重复的幻灯片并假装（突出显示快速导航，我的意思是）滑块位于位置0（因为重复的滑块与第一张幻灯片相同）< / LI>
当current滑块数大于幻灯片总数（LI）时，将滑块（UL）left位置设置为0并将target滑块设置为1，因为我们已经显示第一个滑块使用重复

希望它会有所帮助。

var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length - 1;
var mask = $('.mask ul.images');
var imgWidth = images.width();
var target = 0;
var auto_target = 0;
var mask_width = 340;
var slids_at_a_time = Math.ceil(mask_width / imgWidth);

triggers.first().addClass('selected');
mask.css('width', imgWidth * (lastElem + 1 + slids_at_a_time) + 'px');

function sliderResponse(target) {
  mask.stop(true, false).animate({
    'left': '-' + imgWidth * target + 'px'
  }, 300);
  triggers.removeClass('selected').eq(target % images.size()).addClass('selected');
}

triggers.click(function() {
  alert('not impletement');
});
$('.next').click(function() {
   alert('not impletement');
});
$('.prev').click(function() {
  alert('not impletement');
});

function sliderTiming() {
  auto_target++;
  if (auto_target > images.size()) {
    auto_target = 1;
    mask.css('left', 0);
  }

  sliderResponse(auto_target);
}
images.slice(0, slids_at_a_time).clone().appendTo(mask).addClass('duplicate');
var timingRun = setInterval(function() {
  sliderTiming();
}, 5000);

function resetTiming() {
  clearInterval(timingRun);
  timingRun = setInterval(function() {
    sliderTiming();
  }, 5000);
}

body {
  background-color: #000;
  position: relative;
  font-size: 14px;
  font-family: arial;
}
.mask {
  float: left;
  margin: 40px;
  width: 340px;
  height: 266px;
  overflow: hidden;
}
ul.images {
  position: relative;
  top: 0px;
  left: 0px;
}
ul.images li {
  float: left;
  width: 170px;
}
ul.triggers {
  position: absolute;
  top: 310px;
  left: 80px;
}
ul.triggers li {
  float: left;
  margin: 0 5px;
  font: bold 16px arial;
  cursor: pointer;
  background-color: #ccc;
  color: #000;
  padding: 10px;
  list-style-type: none;
}
ul.triggers li.selected {
  background-color: red;
  color: #000;
}
.control {
  position: absolute;
  top: 380px;
  color: #fff;
  cursor: pointer;
}
.prev {
  left: 120px;
}
.next {
  left: 180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="mask">
  <ul class="images">
    <li>
      <img width="170" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/270px-The_Earth_seen_from_Apollo_17.jpg" />
    </li>
    <li>
      <img width="170" src="http://www.mallorcaweb.net/masm/Planetas/Jupiter.jpg" />
    </li>
    <li>
      <img width="170" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg" />
    </li>
    <li>
      <img width="170" src="http://static.ddmcdn.com/gif/sun-update-1.jpg" />
    </li>
    <li>
      <img width="170" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Neptune.jpg/240px-Neptune.jpg" />
    </li>
  </ul>
</div>
<ul class="triggers">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<span class="control prev">Prev</span>

<span class="control next">Next</span>

jquery滑块连续滑动

2 个答案: