我無法在我的網站上使用平滑滾動滑塊
[英]I can't make the smooth scroll slider work on my site
問題描述
由於某種原因，我無法在投資組合網站上使用“平滑的div滾動” ...我想知道是否有明顯的地方我做錯了。 這是我正在使用的教程的鏈接： http : //www.smoothdivscroll.com/#howitworks
我使用了演示中提到的頂部代碼。
我在標記為“ div”的div之間使用了第二個代碼，因為這是我希望此滑塊顯示在“ slider” div中的位置。
我對插件還很陌生，但是我非常希望該滑塊起作用。
最后，我使用已經設置好的CSS中提到的最后一個代碼（CSS）。 它工作正常，我正在拔頭發。 我也嘗試過使用使用同一滑塊的其他人的代碼，但是它不起作用。
請幫助，我很拼命！ 我需要完成這個網站:(
2 個解決方案
解決方案1
0 已采納 2012-08-18 09:39:12
這是用於平滑滾動插件的全功能演示頁面 。 將以下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），瀏覽器將保存所有依賴項（所需的庫）並將所有絕對鏈接轉換為您本地Hardisk上的相對鏈接。 我想這是使其功能最簡單的方法。
解決方案2
0 2012-09-28 11:11:52
當我在手機上觸摸我的 JavaScript slider 時，我無法向下滾動頁面
[英]When I touch my JavaScript slider on mobile, I can't scroll down the page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.