Question

对于学校项目，我必须为Web应用程序创建一个网站。我在线找到了一个模板，它有一个滑块。现在，我想通过单击图标来停用滑块，并以不同的方式浏览网站，而无需滑动并浏览到其他html文档。

我已将图标链接到其他html文档。但是由于我是JavaScript和JQuery的新手，所以我不知道要在js代码中进行哪些更改以禁用滑块。

index.html

      <div class="cd-slider-nav">
        <nav>
          <span class="cd-marker item-1"></span>
          <ul>
            <li class="selected"><a href="index.html"><div class="image-icon"><img src="img/home-icon.png"></div><h6>Startseite</h6></a></li>
            <li><a href="submitquestion.html"><div class="image-icon"><img src="img/about-icon.png"></div><h6>Frage stellen</h6></a></li>
            <li><a href="questions.html"><div class="image-icon"><img src="img/Frage.png"></div><h6>Alle Fragen</h6></a></li>
            <li><a href="registration.html"><div class="image-icon"><img src="img/Registrieren.png"></div><h6>Registrierung</h6></a></li>
            <li><a href="login.html"><div class="image-icon"><img src="img/Login.png"></div><h6>Login</h6></a></li>
          </ul>
        </nav> 
      </div> <!-- .cd-slider-nav -->

js

jQuery(document).ready(function($){
  var slidesWrapper = $('.cd-hero-slider');

  //check if a .cd-hero-slider exists in the DOM 
  if ( slidesWrapper.length > 0 ) {
    var primaryNav = $('.cd-primary-nav'),
      sliderNav = $('.cd-slider-nav'),
      navigationMarker = $('.cd-marker'),
      slidesNumber = slidesWrapper.children('li').length,
      visibleSlidePosition = 0,
      autoPlayId,
      autoPlayDelay = 5000;

//on mobile - open/close primary navigation clicking/tapping the menu icon
    primaryNav.on('click', function(event){
      if($(event.target).is('.cd-primary-nav')) $(this).children('ul').toggleClass('is-visible');
    });

    //change visible slide
    sliderNav.on('click', 'li', function(event){
      event.preventDefault();
      var selectedItem = $(this);
      if(!selectedItem.hasClass('selected')) {
        // if it's not already selected
        var selectedPosition = selectedItem.index(),
          activePosition = slidesWrapper.find('li.selected').index();

        if( activePosition < selectedPosition) {
          nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
        } else {
          prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, selectedPosition);
        }
function nextSlide(visibleSlide, container, pagination, n){
    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
    checkVideo(visibleSlide, container, n);
  }

  function prevSlide(visibleSlide, container, pagination, n){
    visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      visibleSlide.removeClass('is-moving');
    });

    container.children('li').eq(n).addClass('selected from-left').removeClass('move-left').nextAll().removeClass('move-left');
    checkVideo(visibleSlide, container, n);
  }

  function updateSliderNavigation(pagination, n) {
    var navigationDot = pagination.find('.selected');
    navigationDot.removeClass('selected');
    pagination.find('li').eq(n).addClass('selected');
  }

  function setAutoplay(wrapper, length, delay) {
    if(wrapper.hasClass('autoplay')) {
      clearInterval(autoPlayId);
      autoPlayId = window.setInterval(function(){autoplaySlider(length)}, delay);
    }
  }

  function autoplaySlider(length) {
    if( visibleSlidePosition < length - 1) {
      nextSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, visibleSlidePosition + 1);
      visibleSlidePosition +=1;
    } else {
      prevSlide(slidesWrapper.find('.selected'), slidesWrapper, sliderNav, 0);
      visibleSlidePosition = 0;
    }
    updateNavigationMarker(navigationMarker, visibleSlidePosition+1);
    updateSliderNavigation(sliderNav, visibleSlidePosition);
  }

我尝试使用if（）排除滑块，但此后滑块仍然起作用。

Answer 1

function setAutoplay(wrapper, length, delay) {
    if(wrapper.hasClass('autoplay')) {
      clearInterval(autoPlayId);
      autoPlayId = window.setInterval(function(){autoplaySlider(length)}, delay);
    }
  }

注释此代码

Answer 2

通常，禁用滑块不会在IE9和IE10中起作用。它可以在Chrome和Mozilla中使用。

在chrome和mozilla中，下面的语句运行一次，然后将其禁用。

$（'。selector'）。slider（'disable'）;

将方法放置在文档中。

查看此链接以获取更多说明https://forum.jquery.com/topic/slider-disabling

如何从网站模板禁用滑块？

2 个答案: