Question

我有横向书页图像缩略图ul li，超过100张图片，我已经给出了文本框输入页码以激活该页面并查看该页面，它没有任何问题但它不是自动滚动到那个页面ul中的活跃li，我是JavaScript的初学者，请帮我解决这个问题，请按照我的代码进行操作

HTML

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

  <ul class="book-list" id="book-list">
        <?php if ($total_page > 0) : ?>
        <?php foreach ($results as $row) : ?>
        <li class="book">
            <span class="page-number" id="active-page-number"><?php echo $page_num++ ?></span>
            <img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Page">
        </li>
        <?php endforeach ?>
        <?php endif ?>
  </ul>

的JavaScript

var bookCurrentPages = $('.book #active-page-number');
$('#current-page').keypress(function(e) { 
    var userInput = $('#current-page').val();
    if (this.value.length == 0 && e.which == 48){
        // disable enter zero
        return false;
    }
    else if (e.keyCode == 13) {
        bookCurrentPages.each(function (key) {
            var numKey = key + 1;
            if (userInput == numKey) {
                // console.log(numKey + " success");
                var currentKey = userInput;   
                // console.log(currentKey);
                $('#book-list li:nth-child('+ currentKey +')').children('img').trigger('click');
            }
        })
    return false; // prevent the button click from happening
    }
});

演示检查我的代码， https://jsfiddle.net/Looper/dmug0zxz/1/

Answer 1

你可以试试吗

＆＃13;

<!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() {
			var i = $(this).val() -1;
			activeBook(i);
		});
		$('.book-list').on('click', '.book', function(){
			activeBook($(this).index());
		});
		
		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>

＆＃13;

Answer 2

可以在窗口上使用jquery的scrollTop进行滚动：

$(window).scrollLeft($('#book-list li:nth-child('+ currentKey +')').scrollLeft())

您可以在此处查看scrollLeft函数：jQuery

此外，你可以通过这个做一些很酷的技巧来平滑滚动：

$('html,body').animate({ scrollLeft: xxx})

水平自动滚动到活动缩略图li

2 个答案: