使用 jQuery 的内容滑块

content slider using jquery

本文关键字：jQuery 使用      更新时间：2023-09-26

我正在尝试使用jquery实现内容滑块。我有一个div，里面有很多文字和一些部分。我们可以向下滚动以查看文本。它看起来像这个屏幕截图。现在，当用户单击其中一个跳转到选项时，用户应该被带到该部分（例如，如果用户点击合作社，它应该将他/她带到合作社），如果用户向下滚动文本，则焦点部分应该在跳转到选项中突出显示

我该如何实现它？

这里的好解决方案可能是jquery.scrollTo -轻量级、跨浏览器和高度可定制的动画滚动与 jQuery

索引.html

<!-- Include jQuery from somewhere, must use version 1.8 or above -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include latest jquery.scrollTo, currently 2.1.0, can download from https://github.com/flesler/jquery.scrollTo/releases -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
<!-- Initialize the plugin, the contents of the script can be inlined here, of course -->
<script type="text/javascript" src="js/init.js"></script>

初始化.js

// You can avoid the document.ready if you put the script at the bottom of the page
$(document).ready(function() {
  // Bind to the click of all links with a #hash in the href
  $('a[href^="#"]').click(function(e) {
    // Prevent the jump and the #hash from appearing on the address bar
    e.preventDefault();
    // Scroll the window, stop any previous animation, stop on user manual scroll
    // Check https://github.com/flesler/jquery.scrollTo for more customizability
    $(window).stop(true).scrollTo(this.hash, {duration:1000, interrupt:true});
  });
});

你可以在这里找到要点

相关文章：