gpt4 book ai didi

javascript - 我无法使平滑滚动 slider 在我的网站上工作

转载 作者:行者123 更新时间:2023-11-30 06:40:07 25 4
gpt4 key购买 nike

出于某种原因,我无法在我的投资组合网站上使用“平滑的 div 滚动”...我想知道是否有明显的我做错了。这是我正在使用的教程的链接: http://www.smoothdivscroll.com/#howitworks

我用的是head中demo中提到的top代码。

我在标记为 "的 div 之间使用提到的第二个代码,因为这是我希望此 slider 显示在“ slider ”div 中的位置。

我对插件相当陌生,但我非常希望这个 slider 能正常工作。

最后,我在已经设置好的 CSS 中使用了最后提到的代码(CSS)。它不会起作用,我正在拔头发。我也尝试过使用其他人使用相同 slider 的代码,但它不起作用。

请帮助,我很绝望!我需要完成这个网站:(

最佳答案

这是功能齐全的demo page对于平滑滚动插件。将以下 html 作为 demo.html 复制并粘贴到您的计算机上:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Smooth Div Scroll</title>
<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css" />
<style type="text/css">
#scroller {
width:100%;
height: 330px;
position: relative;
}
#scroller div.scrollableArea img {
position: relative;
float: left;
margin: 0;
padding: 0;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#scroller").smoothDivScroll({
mousewheelScrolling: true,
manualContinuousScrolling: true,
visibleHotSpotBackgrounds: "always",
autoScrollingMode: "onstart"
});
});
</script>
</head>

<body>
<div id="scroller">
<img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Demo image" id="field" />
<img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Demo image" id="gnome" />
<img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Demo image" id="pencils" />
<img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Demo image" id="golf" />
<img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="Demo image" id="river" />
<img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Demo image" id="train" />
<img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Demo image" id="leaf" />
<img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Demo image" id="dog" />
</div>

</body>
</html>

现在在浏览器中打开文件 demo.html(推荐使用 Firefox 或 Chrome :)),转到主菜单 > Save Page As > 选择 Web Page Complete (demo2.html) 并且浏览器将保存所有依赖项(它需要的库)并将所有绝对链接转换为本地硬盘上的相对链接。我想这是使其发挥作用的最简单方法。

关于javascript - 我无法使平滑滚动 slider 在我的网站上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12017017/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com