Question

在我的网站上，我有一个水平缩略图面板，该滚动面板已启用滚动条。由于必须为每个图像显示图像的名称，因此使用了Figure和figcaption。使用php代码根据用户选择的类别动态填充缩略图。我在底部有一个滚动条，可以进行操作。

但是我遇到一个特定的问题：

有时可能会填充1000个缩略图。当用户处于第400张图像并刷新页面时，滚动条会自动再次指向图像1。当我搜索选项时，偶然发现了一个帖子，该帖子提供了一个最小的示例，允许用户在页面刷新时停留在相同的位置。

<!DOCTYPE html>
<html>
<head>
  <style>
  li{display: table-cell; padding:20px;}
  ul{display: table-row; }
  .cont{overflow: auto;}
  li.active{border: 1px solid blue;}
  </style>
</head>
<body>
   <div class="book-list-headbox">
       <div class="page-number-box">
           <label for="" id="total-page" value="" class="mb-0"></label>
           <span class="separator">of</span>
           <input type="text" id="current-page" value="1">
       </div>
   </div>
   <div class="cont">
  <ul class="book-list" id="book-list">
        <li class="book active"><img src="http://via.placeholder.com/300x300/?text=1" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=2" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=3" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=4" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=5" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=6" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=7" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=8" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=9" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=11" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=12" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=13" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=14" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=15" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=16" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=17" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=18" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=19" alt="Book Page"></li>
        <li class="book"><img src="http://via.placeholder.com/300x300/?text=20" alt="Book Page"></li>
  </ul>
</div>

  <div>another content</div>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>


  $(function(){

    $('#current-page').change(function() {
      setStorage($(this).val() -1)
    });


    $('.book-list').on('click', '.book', function(){
      setStorage($(this).index())
    });

  });

  window.addEventListener('load', function() {
      var clicki = (localStorage.getItem('clicki')) ? (localStorage.getItem('clicki')) : 0 ;
      // alert(clicki);
      activeBook(clicki);
  });


  function setStorage(myNum){
    localStorage.setItem('clicki', myNum);
    activeBook(myNum);
  }

  function activeBook(i){
    $('.book').removeClass('active');
    var active = $('.book').eq(i).addClass('active');
    var left = active.position().left;
    var currScroll= $(".cont").scrollLeft(); 
    var contWidth = $('.cont').width()/2; 
    var activeOuterWidth = active.outerWidth()/2; 
    left= left + currScroll - contWidth + activeOuterWidth;


    $('.cont').animate( { 
      scrollLeft: left
    },'slow');
  }

  </script>
</body>
</html>

这很好用，适合我的用例。但是我当前的代码如下：

for ($i=0; $i<count($files); $i++)
{
    $num = $files[$i];
    $filname = basename($num, ".jpg");
    $imgname = basename($num);
    $img = $imgdir . $imgname;
    $filnam = substr($filname, -5);
    $filnam = rtrim($filnam);
    echo '<figure class="item">';
    echo '<img class="matchImages" name="matchImages" onclick="clickedImage(this.id); setGoToFrame(this.id); return false" src="'.$img.'" id="thumbNails'.$filnam.'"/>';
    echo '<figcaption class="caption" name="caption">' . $filnam . '</figcaption>';
    echo '</figure>';
}

或者如果我只需要粘贴图形和插图标题的细节，它将如下所示：

<figure class="item">;
<img src="../images/test1.jpg" id="thumbNails"/>
<figcaption class="caption" name="caption">Test1.jpg</figcaption>
</figure>

我尝试了两种选择。

用数字标签替换了ul和li：无效
将图形和插图标题嵌套在ul li标签中：无效。

在HTML5

0 个答案: