使用 Jssor 滑塊對圖像進行排序並顯示結果
[英]Use Jssor slider to sort images and display results
問題描述
我正在使用Jssor 庫制作一個圖像滑塊，它應該允許對圖像進行排序（向右滑動表示是，向左滑動表示否）。
我想：
- 每個圖像在向左或向右滑動后消失
- 跟蹤哪些圖像是在哪個方向上滑動的
- 將生成的數組輸入到表格中，以在所有圖像都被刷過之后出現
我已經看到 jssor.slider.js 文件中有“isToRight”和“isToLeft”函數，但是當我嘗試在我的 JavaScript 中使用它們時，我的頁面似乎無法訪問它們。 此外，我不能將我的代碼放在 JavaScript 的正確部分，因為整個滑塊停止工作。 我不確定將帶有圖像的 div 添加到表格中是否會很好地工作，但我不確定如何去做。 我需要做什么才能讓它發揮作用？ 這是我目前所在的位置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Simple Slider Example - Jssor Slider, Slideshow</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<!-- it works the same with all jquery version from 1.3.1 to 2.0.3 -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for release -->
<!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.core.js"></script>
<script type="text/javascript" src="../js/jssor.utils.js"></script>
<script type="text/javascript" src="../js/jssor.slider.mini.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
$FillMode: 4,
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
var no_array = [];
var yes_array = [];
function sortImages() {
if SWIPE? (isToRight()) {
$this.push(yes_array);
$this.hide();
}
else SWIPE? (isToLeft()) {
$this.push(no_array);
$this.hide();
}
return no_array;
return yes_array;
}
sortImages();
var myArray = [[no_array], [yes_array]];
function makeTableHTML(myArray) {
var result = "<table>";
for(var i=0; i<myArray.length; i++) {
result += "<tr>";
for(var j=0; j<myArray[i].length; j++){
result += "<td>"+myArray[i][j]+"</td>";
}
result += "</tr>";
}
result += "</table>";
$('#sortedTable').html(result);
}
makeTableHTML(myArray);
});
</script>
<div id="main">
<h1>Swipe right for yes and left for no.</h1>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 200px; overflow: hidden;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 180px;">
<div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div>
</div>
<script>jssor_slider1_starter('slider1_container');</script>
</div>
<div id="sortedTable">
</div>
</div>
</body>
</html>
3 個解決方案
解決方案1
1 2014-04-21 07:03:44
請使用api來跟蹤事件，
<script>
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, function(position, virtualPosition){});
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, function(position, virtualPosition){});
</script>
通過比較變量位置，你就會知道發生了什么。
請參閱jssor 滑塊 api 。
解決方案2
1 2014-04-21 07:51:24
另外，$EVT_PARK 也是合理的，
<script>
jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex, fromIndex){
//fires when slide change from 'fromIndex' to 'slideIndex'
});
</script>
解決方案3
0 2014-04-21 10:03:05
<script>
jQuery(document).ready(function ($) {
var options = {
$FillMode: 4,
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//swipe handling begin
var swipeStartPosition
function OnSwipeStart(position, virtualPosition)
{
lastSwipePosition = virtualPosition;
}
function OnSwipeEnd(position, virtualPosition)
{
if(virtualPosition > swipeStartPosition)
{
//swipe to left end, do something here
//var currentSlideIndex = jssor_slider1.$CurrentIndex();
}
else
{
//swipe to right end, do something here
//var currentSlideIndex = jssor_slider1.$CurrentIndex();
}
}
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, OnSwipeStart);
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, OnSwipeEnd);
//swipe handling end
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
}
</script>
無法創建帶箭頭的Jssor Slider並在其中顯示2個部分
[英]Unable to create a Jssor Slider with arrows and display 2 pieces inside
用於視頻源的JavaScript導致jssor滑塊一次顯示所有字幕
[英]JavaScript for video source is causing jssor slider to display all caption at once
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.