Question

我有一个CSS滑块，除了两件我无法弄清楚的东西外，大部分都有效。第一个是，如何使我的滑块导航按钮按照我的方式工作。现在，如果您点击其中一个，我的addClass会将.active添加到所有按钮，而不是仅添加一个按钮。除此之外，我无法弄清楚如何将滑块位置与导航菜单相关联。我的意思是，如果用户没有点击任何按钮，我仍然希望按钮显示哪个幻灯片处于活动状态。

我的第二个问题是，无论何时点击按钮，它都会停止幻灯片放映。

我在尝试中做错了什么？

偏离主题，但是现在很难将我现有的内容转换为幻灯片而不是滑动它们吗？

＆＃13;

$('.control-button').click(function() {
    button = $(this).attr('id');
    id = button.replace('slide', '');
    pos = (id - 1) * 100;
    $('div#slider figure').css('animation-play-state', 'paused');
    $('div#slider figure').removeClass('figure2');
    $('.control-button').addClass('active');
    posStr = '-' + pos + '%';
    $('.figure').css('left', posStr);
});

$('img').click(function() {
    $('div#inner').css('left', '0px');
    $('div#slider figure').addClass('figure2');
    $('div#slider figure').css('animation-play-state', 'running');

})

＆＃13;

div#slider {
    width: 100%;
    overflow: hidden;
}
div#slider .figure {
    position: relative;
    width: 400%;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: left;
    /*animation: 20s company-slider infinite;*/
}
.figure2 {
    animation: 20s company-slider infinite;
}
@keyframes company-slider {
    0% {
        left: 0%;
    }
    30% {
        left: 0%;
    }
    35% {
        left: -100%;
    }
    55% {
        left: -100%;
    }
    60% {
        left: -200%;
    }
    90% {
        left: -200%;
    }
    95% {
        left: -300%;
    }
    100% {
        left: -300%;
    }
}
div#slider figure img {
    width: 25%;
    min-height: 100%;
    float: left;
}
/*div#slider figure:hover { animation-play-state:paused; }*/

div#slider li {
    list-style: none;
}
div#slider label {
    background-color: #111;
    bottom: .5em;
    cursor: pointer;
    display: block;
    height: .5em;
    position: absolute;
    width: .5em;
    z-index: 10;
}
#controls {
    width: 100%;
    height: auto;
}
#control-container {
    padding: 25px 12%;
}
.control-button {
    display: inline;
    margin: 0 2%;
    width: 25%;
    background: gray;
    height: 10px;
    border: none;
}
.control-button.active {
    display: inline;
    margin: 0 2%;
    width: 25%;
    background: black;
    height: 10px;
    border: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="slider">
    <figure class="figure figure2">
        <img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
        <img src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
        <img src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
        <img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
    </figure>
    <div id="controls">
        <div id="control-container">
            <button id="slide1" class="control-button"></button>
            <button id="slide2" class="control-button"></button>
            <button id="slide3" class="control-button"></button>
        </div>
    </div>
</div>

＆＃13;

Answer 1

这使所有按钮都处于活动状态：

$('.control-button').addClass('active');

将其替换为：

$('.control-button').removeClass('active');
$(event.target).addClass('active');

将event参数添加到该函数中，以便您可以使用event.target：

$('.control-button').click(function(event) {

修改

使控制按钮激活＆＃34;自然＆＃34;因为图像幻灯片有点难。

让每张图片都有一个属性，说明它是哪张幻灯片：

<figure class="figure figure2"> <img data-number="slide1" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt> <img data-number="slide2" src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt> <img data-number="slide3" src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt> <img data-number="slide4" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt> </figure>

创建一个系统来检测图像何时进入视图：

window.setInterval(function() {

检测正在显示的图像：

var activeImage = document.elementFromPoint($(window).width()/2, 10); // The image at the horizontal midpoint of the screen

将相应控制按钮的class设置为active：

$('.control-button').removeClass('active'); $("#"+$(activeImage).attr("data-number")).addClass('active'); // Sets whichever control button that corresponds to the image under the horizontal midpoint of the screen as active

设置在setInterval：
结束时检查的频率
}, /*time interval in miliseconds*/);

Answer 2

至于添加＆＃39;活跃＆＃39;对于所有按钮，你应该替换它：

$('.control-button').addClass('active');

用这个：

$('.control-button').removeClass('active');  //this removes all '.active' first
     $(this).addClass('active');

这里发生的是.control-button点击功能，$（this）代表当前的.control-button元素。

Answer 3

https://jsfiddle.net/q3j01xrs/
那这个呢？我改进了你的脚本。我拿出了你的CSS动画并用另一个JavaScript动画替换了它。看看吧！

$('.control-button').click(function() {
  clearInterval(setInt);
  $('.control-button').removeClass('active');
  $(this).addClass('active');
  var getIndex = $(this).index('.control-button');
  $('.figure img').hide();
  $('.figure img').eq(getIndex).show();
  setInt = setInterval(slide, 5000);
});

function slide() {
  var getIndex = $('.figure img:visible').index('.figure img');
  $('.control-button').removeClass('active');
  $('.figure img:visible').animate({
    width: 'toggle'
  }, 350);
  getIndex++;
  if ((getIndex) == $('.control-button').length) {
    $('.control-button').eq(0).addClass('active');
    $('.figure img').eq(0).animate({
      width: 'toggle'
    }, 350);
  } else {
    $('.control-button').eq(getIndex).addClass('active');
    $('.figure img').eq(getIndex).animate({
      width: 'toggle'
    }, 350);
  }
};
var setInt = setInterval(slide, 5000);

带有CSS滑块的导航按钮

3 个答案: