Question

我需要一个滑块，在幻灯片外部显示标题，当显示每张幻灯片时，相应的标题应在外面突出显示。在下面给出的代码中，功能正在运行，但它不能在循环中工作。请帮忙。

＆＃13;

jQuery(document).ready(function($) {

  var interval;
  interval = setInterval(function() {
    moveRight();
  }, 3000);

  $('._slider').mouseover(function() {
    clearInterval(interval);
  });

  $('._slider').mouseleave(function() {
    interval = setInterval(function() {
      moveRight();
    }, 3000);
  });

  var slideCount = $('._slider ul li').length;
  var slideWidth = $('._slider ul li').width();
  var slideHeight = $('._slider ul li').height();
  var sliderUlWidth = slideCount * slideWidth;

  $('._slider').css({
    width: slideWidth,
    height: slideHeight
  });

  $('._slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });

  $('._slider ul li:last-child').prependTo('._slider ul');

  function moveLeft() {
    $('._slider ul').animate({
      left: +slideWidth
    }, 200, function() {
      $('._slider ul li:last-child').prependTo('._slider ul');
      $('._slider ul').css('left', '');
    });
    var li = $(".caption-slider li.active").prev();
    $(".caption-slider li").removeClass("active");
    li.addClass("active");
  };

  function moveRight() {
    $('._slider ul').animate({
      left: -slideWidth
    }, 200, function() {
      $('._slider ul li:first-child').appendTo('._slider ul');
      $('._slider ul').css('left', '');
    });
    var li = $(".caption-slider li.active").next();
    $(".caption-slider li").removeClass("active");
    li.addClass("active");
  };

  $('._slider_prev').click(function() {
    moveLeft();
    return false;
  });

  $('._slider_next').click(function() {
    moveRight();
    return false;
  });

});

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
  border-top: 5px solid #fff;
  background: #efefef;
  color: #2a2a2a;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  margin-left: 15px;
}

._slider {
  position: relative;
  overflow: hidden;
  margin-left: 15px;
}

._slider:hover ._slider_next,
._slider:hover ._slider_prev {
  display: block;
}

._slider_next,
._slider_prev {
  position: absolute;
  top: 35%;
  z-index: 999;
  display: none;
  width: auto;
  height: auto;
  padding: 2% 4%;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 2em;
  opacity: 0.8;
  cursor: pointer;
}

._slider_next:hover,
._slider_prev:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

._slider_next {
  right: 0;
}

._slider ul {
  position: relative;
  height: 500px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._slider ul li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  background: #ccc;
  display: block;
  width: 500px;
  line-height: 200px;
  text-align: center;
}

.caption-slider li {
  list-style-type: none;
  display: inline;
}

.caption-slider li.active {
  color: #3F51B5;
  text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="caption-slider">
  <li class="active">Caption1</li>
  <li>Caption2</li>
  <li>Caption3</li>
  <li>Caption4</li>
  <ul>
    <div class="_slider">
      <a href="#" class="_slider_next">&#10095;</a>
      <a href="#" class="_slider_prev">&#10094;</a>
      <ul>
        <li>SLIDE 1</li>
        <li>SLIDE 2</li>
        <li>SLIDE 3</li>
        <li>SLIDE 4</li>
      </ul>
    </div>

＆＃13;

Answer 1

首先你有一个HTML错误，你没有正确关闭<ul class="caption-slider">的标签UL

要使循环工作，您需要检查是否已到达最后/第一个元素，然后移至第一个/最后一个元素。

在function moveLeft()上，您需要在li.addClass("active")之前添加以下内容：

if (!li.length) { 
   li = $(".caption-slider li").last();
}

在function moveRight()上，您需要在li.addClass("active")之前添加以下内容：

if (!li.length) { 
   li = $(".caption-slider li").first();
}

请参阅下面的代码段：

＆＃13;

jQuery(document).ready(function($) {

  var interval;
  interval = setInterval(function() {
    moveRight();
  }, 3000);

  $('._slider').mouseover(function() {
    clearInterval(interval);
  });

  $('._slider').mouseleave(function() {
    interval = setInterval(function() {
      moveRight();
    }, 3000);
  });

  var slideCount = $('._slider ul li').length;
  var slideWidth = $('._slider ul li').width();
  var slideHeight = $('._slider ul li').height();
  var sliderUlWidth = slideCount * slideWidth;

  $('._slider').css({
    width: slideWidth,
    height: slideHeight
  });

  $('._slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });

  $('._slider ul li:last-child').prependTo('._slider ul');

  function moveLeft() {
    $('._slider ul').animate({
      left: +slideWidth
    }, 200, function() {
      $('._slider ul li:last-child').prependTo('._slider ul');
      $('._slider ul').css('left', '');
    });
    var li = $(".caption-slider li.active").prev();
    $(".caption-slider li").removeClass("active");
    if (!li.length) { 
       li = $(".caption-slider li").last();
    }
        li.addClass("active");
  };

  function moveRight() {
    $('._slider ul').animate({
      left: -slideWidth
    }, 200, function() {
      $('._slider ul li:first-child').appendTo('._slider ul');
      $('._slider ul').css('left', '');
    });
    var li = $(".caption-slider li.active").next();
    if (!li.length) {
       li = $(".caption-slider li").first();
    }
    $(".caption-slider li").removeClass("active");
    li.addClass("active");
  };

  $('._slider_prev').click(function() {
    moveLeft();
    return false;
  });

  $('._slider_next').click(function() {
    moveRight();
    return false;
  });

});

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
  border-top: 5px solid #fff;
  background: #efefef;
  color: #2a2a2a;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  margin-left: 15px;
}

._slider {
  position: relative;
  overflow: hidden;
  margin-left: 15px;
}

._slider:hover ._slider_next,
._slider:hover ._slider_prev {
  display: block;
}

._slider_next,
._slider_prev {
  position: absolute;
  top: 35%;
  z-index: 999;
  display: none;
  width: auto;
  height: auto;
  padding: 2% 4%;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 2em;
  opacity: 0.8;
  cursor: pointer;
}

._slider_next:hover,
._slider_prev:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

._slider_next {
  right: 0;
}

._slider ul {
  position: relative;
  height: 500px;
  margin: 0;
  padding: 0;
  list-style: none;
}

._slider ul li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  background: #ccc;
  display: block;
  width: 500px;
  line-height: 200px;
  text-align: center;
}

.caption-slider li {
  list-style-type: none;
  display: inline;
}

.caption-slider li.active {
  color: #3F51B5;
  text-decoration: underline;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="caption-slider">
  <li class="active">Caption1</li>
  <li>Caption2</li>
  <li>Caption3</li>
  <li>Caption4</li>
  </ul>
    <div class="_slider">
      <a href="#" class="_slider_next">&#10095;</a>
      <a href="#" class="_slider_prev">&#10094;</a>
      <ul>
        <li>SLIDE 1</li>
        <li>SLIDE 2</li>
        <li>SLIDE 3</li>
        <li>SLIDE 4</li>
      </ul>
    </div>

＆＃13;

要显示的滑块字幕超出幻灯片

1 个答案: