JavaScript函數僅用於第一次點擊時更改元素邊距

我有我想要旋轉的圖片的內聯列表。我一次只顯示五個，如果你點擊除中心外的任何一個移動到中心，其他人移動到屏幕外。JavaScript函數僅用於第一次點擊時更改元素邊距

我寫了一個函數，使用.offsetLeft來得到一個按鈕與另一個按鈕的關係，並確定容器應該移動到哪個方式。我希望我可以改變按鈕的偏移量並在容器中移動它們，但是很遺憾，你不能用JavaScript來做到這一點。

因此，我確定最好有一個窗口，並通過偏移差異更改容器後邊距，這很好。第一次之後，每次我點擊一張圖片時，它就會像遍歷代碼一樣，但它不會改變容器的邊距。

下面是函數：

var cur_position; 
    function set_variables() 
    { 
     cur_position = document.getElementById("button3"); 
    } 

    function carousel(Event) 
    { 
     console.log(cur_position); 
     var clicked_element = Event.target; 
     var tray_bar = document.getElementById("button_tray"); 
     var num = 0; 

     console.log(clicked_element.offsetLeft); 
     clicked_element.offsetLeft = cur_position.offsetLeft - clicked_element.offsetLeft; 
     console.log(clicked_element.offsetLeft); 

     console.log(cur_position.offsetLeft); 
     console.log(clicked_element.offsetLeft); 

     if (clicked_element.offsetLeft < cur_position.offsetLeft) 
     { 
      num = cur_position.offsetLeft - clicked_element.offsetLeft; 
      console.log(cur_position.offsetLeft - num); 
      document.getElementById("button_tray").style.marginLeft += num; 

      cur_position = clicked_element; 
      console.log(cur_position); 
     } 
     else 
     { 
      num = clicked_element.offsetLeft - cur_position.offsetLeft; 
       console.log(num); 
       tray_bar.style.marginLeft = tray_bar.style.marginLeft - num; 

      cur_position = clicked_element; 
      console.log(cur_position); 
     } 
    }

，並在體內的代碼：

 <div class="button-wrapper"> 
      <ul id="button_tray" class="buttons"> 
       <li id="button1" class="message-button" onclick="carousel(event)"><div></div></li> 
       <li id="button2" class="link-button" onclick="carousel(event)"><div></div> </li> 
       <li id="button3" class="live-button" onclick="carousel(event)"><div></div> </li> 
       <li id="button4" class="social-button" onclick="carousel(event)"><div></div></li> 
       <li id="button5" class="ppt-button" onclick="carousel(event)"><div></div> </li> 
       <li id="button6" class="test-1" onclick="carousel(event)"><div></div></li> 
       <li id="button7" class="test-2" onclick="carousel(event)"><div></div></li> 
       <li id="button8" class="test-3" onclick="carousel(event)"><div></div></li> 
      </ul> 
     </div> 
    </div>

我真的想弄清楚爲什麼它只是工作在第一時間，甚至最好能將圖片相互移動。請用JavaScript代替jQuery來回答問題。

來源

2011-08-25 Ryan

創建[小提琴演示（http://jsfiddle.net ）它會更容易幫助 – Ibu

這個代碼有很多問題。雅各布勾畫了一個另外：使用僅限IE的屬性，而不是調用'set_variables'，內聯JS等等。這是加強jQuery的絕佳機會（另一個例子）。 –

set_variables是主體中的onload函數 – Ryan

我不知道這是否是唯一的問題，但是當您設置邊距時，您沒有考慮單位或樣式的數據類型。有了這條線：

document.getElementById("button_tray").style.marginLeft += num;

你的marginLeft第一次訪問可能是一個空字符串，所以+= num將正常工作。如果num設置爲20，則瀏覽器可能會將樣式屬性轉換爲20px。下一次，當你訪問marginLeft，你會回來"20px";加上20就會導致"20px20"，這顯然不是一個好的價值。

我建議，當你要添加到或邊屬性中刪除，你應該像這樣做，而不是：

var tray_bar = document.getElementById("button_tray"); 
var pixelMargin = parseInt(tray_bar.style.marginLeft, 10); 
pixelMargin += num; 
tray_bar.style.marginLeft = pixelMargin.toString() + 'px';

來源

2011-08-25 23:37:09 Jacob

我最終改變了它現在設置的方式，如果你記錄pixelMargin.toString（）+'px'它返回NaNpx，但我已經過去了，現在它的工作，現在感謝您的幫助。 – Ryan

JavaScript函數僅用於第一次點擊時更改元素邊距

回答

相關問題