隐藏后再次显示时，将焦点返回到滑动滑块1.8.1

编程问答 2022-08-15

问题描述

如您在示例中所见，我可以在滑块中移动并使用鼠标单击幻灯片。我也可以使用键盘进行移动，但是当我单击幻灯片并退出时，除非再次单击该滑块，否则我将无法移动。

我的问题：有没有办法仅使用键来停留或返回滑块？

就像按A进入将显示面板1的幻灯片＃1，然后按exit并用箭头移动到幻灯片＃2，然后按A进入面板2？

谢谢。

https://codepen.io/jinzagon/pen/oNxYKgW 

        <link rel="stylesheet" href="./style.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
    
<style></style>
</head>
<body>

    <div class="panel-up" id="1">
      <div class="panel-content">
        <div class="close"></div>
        <p style="margin-bottom: 30px; color:white;">FIRST PANEL</p> 
      </div>
    </div>

    <div class="panel-up" id="2">
      <div class="panel-content">
        <div class="close"></div>
        <p style="margin-bottom: 30px; color:white;">SECOND PANEL</p> 
      </div>
    </div>

<div class="content" style="color:white">
    <section class="games">
    
        <div>
        <a style="color:white;" href="#1" class="reveal-up" id='open'><img src="http://placehold.it/288x288?text=1"></a>
        </div>
        <div>
        <a style="color:white;" href="#2" class="reveal-up" id='close'><img src="http://placehold.it/288x288?text=2"></a>
        </div>
        <div>
                        <img src="http://placehold.it/288x288?text=3">
        </div>
        <div>
                        <img src="http://placehold.it/288x288?text=4">
        </div>
        <div>
                        <img src="http://placehold.it/288x288?text=5">
        </div>
        
    </section></div>
    
    
    <div class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)">
    
    <div class="slideshow">
  <div class="slider">
    <div class="item">
      <img src="https://images.unsplash.com/photo-1445768593937-05a3f7832b68?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1443363742879-63e3d75de2f8?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1446329813274-7c9036bd9a1f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
    </div>
  </div>
</div>

    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script src='./script.js'></script>
</body>

CSS 

body{
    overflow:hidden;
    background-color:#000;
}

/*Slider games*/

.games{
    position:absolute;
}

.slider {
  background-color: white;
  height: auto!important;
}

.games  .slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.top_slider{
    overflow:hidden;
}

/* Slider background */

.slideshow {
  position: absolute;
  z-index: 1;
  height: 100%;
  max-width: 700px;
  position: absolute;
    top: 0;
    left: 0;
    z-index: -99;
    opacity:0.5;
}
.slideshow * {
  outline: none;
}
.slideshow .slider {
 
}
.slideshow .slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7,0.3,1);
  transition: all 1s cubic-bezier(0.7,1);
}
.slideshow .item {
  height: 100%;
  position: relative;
  z-index: 1;
}
.slideshow .item img {
  width: 100%;
  -webkit-transition: all 1s cubic-bezier(0.7,1);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
          transform: translateX(2rem);
}
.slideshow .item.slick-active img {
  -webkit-transform: scale(2);
          transform: scale(2);
          transform: translateX(0rem);
}

/* Panels */

.content {
  padding: 50px;
  position: absolute;
  width: 90%;
  -webkit-transition: all .7s ease;
  transition: all .7s ease;  
  transform: scale(1);
  opacity:1;
  bottom:10%;
}
.content.hidefor-panel-up { 
    bottom: 20%;
    transform: scale(0.95);
    opacity:0;
}

.ip {
  display:block;
  width:100%; height:100%;
  object-fit: cover;
  position: absolute;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;  
  opacity:1;
  top:0;
  opacity:1; z-index:-5; position:absolute;
}
.ip.hidefor-panel-up { 
    opacity:1;
    top: 10%;
}

}
.panel {
  padding: 20px;
}
.panel-content {
  position: relative;
  /*background: #efefef;*/
  padding: 30px 50px;
  overflow-y: auto;
  height: 100%;
}
.panel-content .close {
  line-height: 15px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  display: block;
  color: #ffffff;
  right: 5px;
  top: 5px;
  height: 15px;
  width: 15px;
  content: "✖";
}
.panel-content .close:before {
  line-height: 15px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  display: block;
  color: #ffffff;
  right: 5px;
  top: 5px;
  height: 15px;
  width: 15px;
  content: "✖";
}

.panel-up {
  z-index: 10;
  position: fixed;
  display: block;
  bottom: 0;
  -webkit-transition: all .7s ease;
  transition: all 0.7s ease-out;
  bottom: -20%;
  width: 100%;
}
.panel-up.expanded {
  bottom: 0;
}
.reveal-left {
  float: left;
}
.reveal-up {

}
.nav {
  padding: 10px;
  margin: 0 auto;
  height: 10px;
  width: 90%;
}
.nav button {
  padding: 4px 6px;
}
.nav a {
  font-weight: bold;
  color: #222;
}

.bottom {
  background: yellow;
  display: block;
  position: fixed;
  width: 100%;
  bottom: 0;
}

JS 

    $(".games").slick({
        dots: false,infinite: false,centerMode: true,asNavFor: '.slider',slidesToShow: 4,slidesToScroll: 1,arrows: false,accessibility: true,focusOnSelect: true,waitForAnimate:true,draggable:false
            
    });
    
    
    $('.slider').slick({
    draggable: true,dots: true,fade: true,speed: 900,asNavFor: '.games',cssEase: 'cubic-bezier(0.7,1)',touchThreshold: 100
  });
  
    $('.games').slick('slickGoTo',0);
  
  //Panels//
  
  // Reveal & Close Panels
var revealPanel = function (buttonReveal,panel,buttonClose) {
  $(document).ready(function() {
    // Reveal panel 
    $(buttonReveal).on('click',function() {
      $(panel).addClass('expanded');
      console.log('hidefor-'+panel);
      $(".content").addClass('hidefor-'+panel.substr(1));
      $(".ip").addClass('hidefor-'+panel.substr(1));
    });
    
    // Close panel
    $(buttonClose).on('click',function() {
      $(panel).removeClass('expanded');
      $(".content").removeClass('hidefor-panel-up');
            $(".ip").removeClass('hidefor-panel-up');
    $('.games').slick('slickCurrentSlide');
    
    });   
    
    // ESC to close Panel
    $(document).bind("keydown",function(e) {
      if (e.keyCode == 27) { 
          $(panel).removeClass('expanded'); 
          $(".content").removeClass('hidefor-panel-up');
         $(".ip").removeClass('hidefor-panel-up');
         $('.games').slick('slickCurrentSlide');
         
      }    
    });
  }); 
}

revealPanel('.reveal-up','.panel-up','.close');
//revealPanel('.reveal-left','.panel-left','.close');

    $('#open').on('click',function() {
      $('.panel-up').hide();$('#1').show();
    });
    $('#close').on('click',function() {
      $('.panel-up').hide();$('#2').show();
    });

// Reveal Panel with Shortcuts
$(document).ready(function() {
  $(document).bind("keydown",function(e) {
    if (e.keyCode == 76) { 
    console.log(e.keyCode);
        $('.panel-left').addClass('expanded'); 
    }
    if (e.keyCode == 82) { 
        $('.panel-up').hide();$('#1').show();
        $('.panel-up').addClass('expanded'); 
        $(".content").addClass('hidefor-panel-up');
        $(".ip").addClass('hidefor-panel-up');
    }
  });
});

解决方法

您要做的是在幻灯片放映中使用ESC或“关闭”按钮时，将焦点移回到.games滑块上。请注意，您只能将焦点放在可以聚焦的元素上，例如a，tabindex或input

滑块使用tabindex这是可聚焦的元素，因此我们可以获取滑块的tabindex并使用focus()，如下所示：

   $(".games .slick-list").attr('tabindex',0).focus();

您可以在希望将焦点重新放回滑块的任何地方使用它，因此在您的示例中，您将希望在以下位置使用它：

  1. 幻灯片放映初始化后
    /* 1. put focus on the first slide on page load */
    /* Note this must be called BEFORE the slider is initialised */
    $('.games').on('init',function(event,slick) {
      $(".games .slick-list").attr('tabindex',0).focus();
    });

    $(".games").slick({
        /* Slider settings here... */
    });
  1. 关闭幻灯片放映图像的任何地方，例如在ESC键上或单击“关闭”按钮时：
$(buttonClose).on('click',function() {
      /* do button-close actions */
      /* 2. put focus back on the current slide after close button clicked */
      $(".games .slick-list").attr('tabindex',0).focus();

    });

（注意：要使其完全与您的演示代码一起使用，我必须在滑块中的每个图像周围添加所有a链接，因为这似乎是CSS所要处理的）

工作片段：

/* 1. put focus on the slider on page load after it is set up */
$('.games').on('init',slick) {
  $(".games .slick-list").attr('tabindex',0).focus();
});

$(".games").slick({
  dots: false,infinite: false,centerMode: true,asNavFor: '.slider',slidesToShow: 4,slidesToScroll: 1,arrows: false,accessibility: true,focusOnSelect: true,waitForAnimate: true,draggable: false
});

$('.slider').slick({
  draggable: true,dots: true,fade: true,speed: 900,asNavFor: '.games',cssEase: 'cubic-bezier(0.7,0.3,1)',touchThreshold: 100
});

$('.games').slick('slickGoTo',0);

//Panels//

// Reveal & Close Panels
var revealPanel = function(buttonReveal,panel,buttonClose) {
  $(document).ready(function() {
    // Reveal panel 
    $(buttonReveal).on('click',function() {
      $(panel).addClass('expanded');
      $(".content").addClass('hidefor-' + panel.substr(1));
      $(".ip").addClass('hidefor-' + panel.substr(1));
    });

    // Close panel
    $(buttonClose).on('click',function() {
      $(panel).removeClass('expanded');
      $(".content").removeClass('hidefor-panel-up');
      $(".ip").removeClass('hidefor-panel-up');
      $('.games').slick('slickCurrentSlide');
      /* 2. put focus on back the slider after close button clicked */
      $(".games .slick-list").attr('tabindex',0).focus();
    });

    // ESC to close Panel
    $(document).bind("keydown",function(e) {
      if (e.keyCode == 27) {
        $(panel).removeClass('expanded');
        $(".content").removeClass('hidefor-panel-up');
        $(".ip").removeClass('hidefor-panel-up');
        $('.games').slick('slickCurrentSlide');
        /* 2. put focus on back the slider after ESC */
        $(".games .slick-list").attr('tabindex',0).focus();
      }
    });
  });
}

revealPanel('.reveal-up','.panel-up','.close');

$('#open').on('click',function() {
  $('.panel-up').hide();
  $('#1').show();
});
$('#close').on('click',function() {
  $('.panel-up').hide();
  $('#2').show();
});

// Reveal Panel with Shortcuts
$(document).ready(function() {
  $(document).bind("keydown",function(e) {
    if (e.keyCode == 76) {
      console.log(e.keyCode);
      $('.panel-left').addClass('expanded');
    }
    if (e.keyCode == 82) {
      $('.panel-up').hide();
      $('#1').show();
      $('.panel-up').addClass('expanded');
      $(".content").addClass('hidefor-panel-up');
      $(".ip").addClass('hidefor-panel-up');
    }
  });
});
body {
  overflow: hidden;
  background-color: #000;
}


/*Slider games*/

.games {
  position: absolute;
}

.slider {
  background-color: white;
  height: auto!important;
}

.games .slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.top_slider {
  overflow: hidden;
}


/* Slider background */

.slideshow {
  position: absolute;
  z-index: 1;
  height: 100%;
  max-width: 700px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -99;
  opacity: 0.5;
}

.slideshow * {
  outline: none;
}

.slideshow .slider {}

.slideshow .slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7,1);
  transition: all 1s cubic-bezier(0.7,1);
}

.slideshow .item {
  height: 100%;
  position: relative;
  z-index: 1;
}

.slideshow .item img {
  width: 100%;
  -webkit-transition: all 1s cubic-bezier(0.7,1);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  transform: translateX(2rem);
}

.slideshow .item.slick-active img {
  -webkit-transform: scale(2);
  transform: scale(2);
  transform: translateX(0rem);
}


/* Panels */

.content {
  padding: 50px;
  position: absolute;
  width: 90%;
  -webkit-transition: all .7s ease;
  transition: all .7s ease;
  transform: scale(1);
  opacity: 1;
  bottom: 10%;
}

.content.hidefor-panel-up {
  bottom: 20%;
  transform: scale(0.95);
  opacity: 0;
}

.ip {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  opacity: 1;
  top: 0;
  opacity: 1;
  z-index: -5;
  position: absolute;
}

.ip.hidefor-panel-up {
  opacity: 1;
  top: 10%;
}


}
.panel {
  padding: 20px;
}
.panel-content {
  position: relative;
  /*background: #efefef;*/
  
  padding: 30px 50px;
  overflow-y: auto;
  height: 100%;
}
.panel-content .close {
  line-height: 15px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  display: block;
  color: #ffffff;
  right: 5px;
  top: 5px;
  height: 15px;
  width: 15px;
  content: "✖";
}
.panel-content .close:before {
  line-height: 15px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  display: block;
  color: #ffffff;
  right: 5px;
  top: 5px;
  height: 15px;
  width: 15px;
  content: "✖";
}
.panel-up {
  z-index: 10;
  position: fixed;
  display: block;
  bottom: 0;
  -webkit-transition: all .7s ease;
  transition: all 0.7s ease-out;
  bottom: -20%;
  width: 100%;
}
.panel-up.expanded {
  bottom: 0;
}
.reveal-left {
  float: left;
}
.reveal-up {}
.nav {
  padding: 10px;
  margin: 0 auto;
  height: 10px;
  width: 90%;
}
.nav button {
  padding: 4px 6px;
}
.nav a {
  font-weight: bold;
  color: #222;
}
.bottom {
  background: yellow;
  display: block;
  position: fixed;
  width: 100%;
  bottom: 0;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />

<body>

  <div class="panel-up" id="1">
    <div class="panel-content">
      <div class="close"></div>
      <p style="margin-bottom: 30px; color:white;">FIRST PANEL</p>
    </div>
  </div>

  <div class="panel-up" id="2">
    <div class="panel-content">
      <div class="close"></div>
      <p style="margin-bottom: 30px; color:white;">SECOND PANEL</p>
    </div>
  </div>

  <div class="content" style="color:white">
    <section class="games">

      <div>
        <a style="color:white;" href="#1" class="reveal-up" id='open'><img src="http://placehold.it/288x288?text=1"></a>
      </div>
      <div>
        <a style="color:white;" href="#2" class="reveal-up"><img src="http://placehold.it/288x288?text=2"></a>
      </div>
      <div>
        <a style="color:white;" href="#3" class="reveal-up"><img src="http://placehold.it/288x288?text=3"></a>
      </div>
      <div>
        <a style="color:white;" href="#4" class="reveal-up"><img src="http://placehold.it/288x288?text=4"></a>
      </div>
      <div>
        <a style="color:white;" href="#5" class="reveal-up"><img src="http://placehold.it/288x288?text=5"></a>
      </div>

    </section>
  </div>


  <div class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)">

    <div class="slideshow">
      <div class="slider">
        <div class="item">
          <img src="https://images.unsplash.com/photo-1445768593937-05a3f7832b68?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
        </div>
        <div class="item">
          <img src="https://images.unsplash.com/photo-1443363742879-63e3d75de2f8?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
        </div>
        <div class="item">
          <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
        </div>
        <div class="item">
          <img src="https://images.unsplash.com/photo-1446329813274-7c9036bd9a1f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
        </div>
      </div>
    </div>

  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

htmljavascript

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...