带有CSS滑块的导航按钮

Question

我有一个CSS滑块，除了两件事情我找不出来外，大部分都适用。首先，如何让我的滑动导航按钮按照我以后的方式工作。现在，如果您点击一个，我的addClass将.active添加到所有按钮，而不是只点击一个按钮。除此之外，我无法弄清楚如何将滑块位置与导航菜单相关联。我的意思是，如果用户不点击任何按钮，我仍然希望按钮显示哪个幻灯片处于活动状态。

我的第二个问题是每当按钮被点击它停止幻灯片放映。

我在做什么错在我的尝试？

焦虑问题，但是现在我难以转换现在淡入幻灯片而不是滑动幻灯片吗？

$('.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'); 
 

 
})

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; 
 
}

<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>

Answer 1

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); 

Answer 2

至于加入“主动”给所有的按钮就应该更换此：

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

与此：

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

这里发生的是，。控制按钮内点击函数，$（this）表示当前的.control-button元素。

Answer 3

这使得所有活动的按钮：

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

将其替换为：

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

的event参数添加到功能，使您可以使用event.target：

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

---

编辑：

随着图像滑动使控制按钮“自然”激活有点困难。

使每个图像具有表示它是滑动的属性：

<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*/);