使用JS滑動或捲起圖像使用JS

我有兩個JS按鈕可以上下滾動，如 this sample page所示。使用JS滑動或捲起圖像使用JS

現在它只是改變圖像沒有效果，我需要應用滑動或滾動效果，使圖像看起來循環，像THIS但上下，

JS代碼被動態地從ASP生成。網頁，這裏是JS長達按鈕，

var my_slots = ['_', 'x', 'y', 'z', '0', '1', 
       '2', '3', '4', '5', '6', '7', '8', '9']; 


$("#sslot_img0_u").live('click', function() { 
    image = document.getElementById('sslot_img' + '0'); 
    image.setAttribute('src', do_up('0', image.getAttribute('alt'))); 
    $("#hstring").val(my_slots[2]); 
    return false; 
}); 

function do_up(key1, key2) { 
    image = document.getElementById('sslot_img' + key1); 
    if (Number(key2) == my_slots.length - 1) { 
     image.setAttribute('alt', '0'); 
     $get('sslot_hf' + key1).value = my_slots[0]; 
     return "http://www.fedne.com/" + my_slots[0] + '.gif'; 
    } else { 
     image.setAttribute('alt', (Number(key2) + 1)); 
     $get('sslot_hf' + key1).value = my_slots[Number(key2) + 1]; 
     return "http://www.fedne.com/" + my_slots[Number(key2) + 1] + '.gif'; 
    } 
}

，並有可能得到的按鈕不是在div單擊事件這種效果呢？

來源

2012-09-05 Alaa

我會建議您使用單個圖像作爲數字微調而不是10個獨立的圖像。這將大大簡化動畫。 – Shmiddty

不錯的想法，但代碼中顯示的問題是，它是動態生成的，我使用'my_slots'數組來顯示顯示的數字。 – Alaa

使用單獨的圖像時，您必須：單擊箭頭時創建下一個數字，適當地爲當前數字和下一個數字設置動畫，然後銷燬第一個數字。希望有所幫助。 – Shmiddty

你想要的是使用jquery animate（）函數實現的，並且調整了元素的位置屬性。你正在使用的是改變現有的價值/形象。方法是不同的。

您可能需要右鍵單擊 - >在Chrome上查看所需結果的元素以獲得更清晰的圖片。

我希望我的問題得到了解決。道歉，如果我沒有。

編輯 - 查看jquery slide（）函數文檔。可能是你需要的是在那裏。

來源

2012-09-05 16:41:35

感謝您的貢獻，爲什麼不能應用animate（）函數，並在按鈕單擊事件中進行調整？我看着jQuery的幻燈片（），但它看起來像隱藏當前滑動下一個！ – Alaa

現在看，你只是得到下一張圖片並替換上一張圖片，所以你不會得到你想要的效果。理想情況下，製作一個包含所有字符的大圖形，並將其放在一個固定尺寸的div中，以便一次只能看到一個字符，然後每次按上下鍵使用slide（）將元素移動一個固定的金額（相當於字符大小）。 –

不錯的想法，但代碼中顯示的問題是，它是動態生成的，我使用'my_slots'數組來顯示顯示的數字。 – Alaa

使用JS滑動或捲起圖像使用JS

回答

相關問題