배열을 사용하여 img 소스를 변경하십시오.

jQuery를 사용하여 이미지 원본을 변경하려고합니다. 자동으로 생성 된 배열에서 새 파일 경로를 가져오고 싶습니다. 배열에 대한 코드가 있지만 함수에서 배열을 사용하려고 완전히 막혔습니다. 첫째, i이 rightButton 기능의 값을 가지고, 하나에서 그것을 전달하거나 (당신이 원하는 번호로하지 초기화하지 않는 코드배열을 사용하여 img 소스를 변경하십시오.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="styles.css" rel="stylesheet" type="text/css" /> 
<script src="jquery.js"></script> 




<script type="text/javascript"> 

//create an array that holds all image paths 
var picArray = []; 

for (var i =1; i <=20; i++) { // 20 is the number of images 
var elemvalue = "images/videoseq_" + format(i) + ".jpg"; 
picArray[i] = elemvalue; 
//alert(picArray) 
} 

function format(n) { //this function simply adds leading zeros to filenames 
n = n.toString(); 
var result; 
if (n.length == 4) {result = "0" + n} 
if (n.length == 3) {result = "00" + n} 
if (n.length == 2) {result = "000" + n} 
if (n.length == 1) {result = "0000" + n} 
return result; 
}; 
// end image path array creator code 


//this function should insert the next imagepath in the array for the image with the class .changeImg 
function rightButton(){ 
    var i; 
    var imgPath = $("img .changeImg").attr("src", "picArray[i++]"); 
    //alert (imgPath); 
}; 

function leftButton(){ 
    alert('helloleft') 
}; 


// }); 





</script> 


</head> 

<body> 

<div id="container"> 
    <img class="changeImg" src="images/videoseq_00000.jpg" width="1280px" height="720px" /> 
    <div id="left" onclick="leftButton();"></div> 
    <div id="right" onclick="rightButton();"></div> 

</div> <!--video --> 





</body> 
</html>

출처

2012-05-18 Sony packman

'VAR imgPath = $ (" img.changeImg "). attr ("src ", picArray [i ++]);'picArray의 값이 아닌 src에 문자열을 할당합니다. 큰 따옴표는 값에 대해이 행에 배치되지 않습니다. – Murtaza

picArray에서 따옴표를 제거하십시오. 이 태그는 이미지 태그의 jQuery 셀렉터에 $ ("img.changeImg")가 있어야하는 공간을 가져서는 안됩니다. var imgPath = $ ("img .changeImg"). attr ("src", picArray [i ++]); ' –

") – Murtaza

두 가지 문제 : 다음

내 코드입니다 그것이 무엇이되어야하는지)?

둘째, 당신의 imgPath 변수가 필요하고 자바 스크립트 값은 따옴표로되어 있지 않으며, 참조 :

var imgPath = $("img.changeImg").attr("src", "picArray[i++]");

이되고 당신의 rightButton 코드를 변경

function rightButton(){ 
    var i = 0; //what should "i" be? Should it be global? I've just put 0 as a placeholder 
    $("img.changeImg").prop("src", picArray[i++]); 
}

출처

2012-05-18 11:32:20 mattytommo

안녕하세요! 클릭 할 때 이미지가 변경되는 슬라이드 쇼를 만들려고합니다. 사용자가 "앞으로"버튼을 클릭하면 시퀀스의 다음 이미지가로드되고 사용자가 "뒤로"버튼을 클릭하면 배열의 현재 "슬롯"의 번호를 "i"값이 실제로 나타내야한다고 생각합니다. 버튼을 클릭하면 이전 이미지가로드 될 것입니다. –

아, 그럼'var i = 0'을 전역 변수로 만든 다음 위 코드를'leftButton'에 복사하고'picArray [i -]'를 사용하십시오 :) – mattytommo

오, 와우, 안돼, 안돼! 나는 거의 울고 싶다. 나는 많은 것을 항상 구문이나 논리를 어지럽게 엉망으로 만들었다. 그래도 여전히 이상한 일이 있습니다. 처음 Chrome에서 웹 페이지를 실행하면 오른쪽 및 왼쪽 div가 표시되지 않습니다. 하지만 다시로드하면 다시 볼 수있게되고 모든 것이 작동합니다. 너 한테 이런 일이 있었던거야? –

배열을 사용하여 img 소스를 변경하십시오.

답변

관련 문제