onclick 스왑 이미지 js

Question

에 선택 드롭 다운 상자를 추가하십시오. 이미지를 클릭하면 이미지 scr을 변경하는 자바 스크립트가 있습니다. 또한 화살표 키보드 탐색 기능과 페이지 매김 링크가 있습니다. 원하는 것은 내가 원하는 이미지로 점프 할 수있는 선택 드롭 다운 목록 상자를 추가하는 것입니다. 어떻게해야합니까? 난 그냥 내가 옵션 값으로 목록에서 이미지 소스 자체를 자동으로 채 웁니다 빈 드롭 다운으로 시작 거라고없는 선택 드롭 다운 목록 버튼을

/* set first image in frame from #shoebox on document.ready */ 
 
$(function() { 
 
    var leadOff = $('#shoebox img:first-child').attr('source'); 
 
\t $('.picture').attr({'src' : leadOff, 'imageposition' : '1'}); 
 
}); 
 
/* load next image from #shoebox (click on image and/or next button) */ 
 
$('#pictureframe, #buttonright').click(function() { 
 
    var imageTally = $('#shoebox img').length; 
 
\t var imagePosition = $('.picture').attr('imageposition'); 
 
    var plusOne = parseInt(imagePosition) + 1; 
 
    var nextUp = $('#shoebox img:nth-child(' + plusOne + ')').attr('source'); 
 
    if (imagePosition == imageTally) { 
 
    var leadOff = $('#shoebox img:first-child').attr('source'); 
 
    $('.picture').attr({'src' : leadOff, 'imageposition' : '1'}); 
 
    } else { 
 
    $('.picture').attr({'src' : nextUp, 'imageposition' : plusOne}); 
 
    } 
 
}); 
 
/* load previous image from #shoebox (click on prev button) */ 
 
$('#buttonleft').click(function() { 
 
    var imageTally = $('#shoebox img').length; 
 
\t var imagePosition = $('.picture').attr('imageposition'); 
 
    var minusOne = parseInt(imagePosition) - 1; 
 
    var nextUp = $('#shoebox img:nth-child(' + minusOne + ')').attr('source'); 
 
    if (imagePosition == '1') { 
 
    var lastPic = $('#shoebox img:last-child').attr('source'); 
 
    $('.picture').attr({'src' : lastPic, 'imageposition' : imageTally}); 
 
    } else { 
 
    $('.picture').attr({'src' : nextUp, 'imageposition' : minusOne}); 
 
    } 
 
}); 
 

 
/* Add arrow keyboard navigation */ 
 
function GoToLocation(url) 
 
    { 
 
    window.location = url; 
 
    } 
 
Mousetrap.bind("right", function() { 
 
document.getElementById('buttonright').click(); 
 
    }); 
 
    
 
    function GoToLocation(url) 
 
    { 
 
    window.location = url; 
 
    } 
 
Mousetrap.bind("left", function() { 
 
document.getElementById('buttonleft').click(); 
 
    });

body { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    width: 100%; 
 
} 
 
#wall { 
 
    display: flex; 
 

 
    flex-direction: column; 
 
    padding: 6px; 
 
    background-color: hsla(0, 0%, 20%, 1); 
 
} 
 
#pictureframe { 
 
    display: flex; 
 
    padding: 6px; 
 
    background-color: hsla(0, 0%, 40%, 1); 
 
} 
 
#pictureframe img { 
 
    display: flex; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#buttonswrapper { 
 
    display: flex; 
 
    flex-grow: 1; 
 
} 
 
#buttonleft, #buttonright { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-grow: 1; 
 
    padding: 6px; 
 
    color: hsla(40, 20%, 70%, 1); 
 
    font-variant: small-caps; 
 
    font-weight: bold; 
 
    font-family: Verdana, sans-serif; 
 
    background-color: hsla(0, 0%, 40%, 1); 
 
    cursor: pointer; 
 
} 
 
#buttonleft:hover, #buttonright:hover { 
 
    background-color: hsla(50, 50%, 40%, 1); 
 
} 
 
#shoebox { 
 
    display: none; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script> 
 
<div id="wall"> 
 
    <div id="pictureframe"> 
 
    <img class="picture" src=""> 
 
    </div> 
 
    <div id="buttonswrapper"> 
 
    <div id="buttonleft">prev</div> 
 
    <div id="buttonright">next</div> 
 
    </div> 
 
</div> 
 
<div id="shoebox"> 
 
    <!-- prevent loading all images by changing src to source --> 
 
    <img source="http://i.imgur.com/tL6nW.gif"> 
 
    <img source="http://i.imgur.com/BfZ5f.gif"> 
 
    <img source="http://i.imgur.com/mR7wo.gif"> 
 
</div>

Answer 1

를 제출합니다 그런 다음 드롭 다운의 changed 이벤트로 선택한 옵션을 기반으로 어떤 이미지가로드되는지 확인하십시오. 여기에 당신의 설정을 다음과 내가 와서 무엇을 :

var select = $('#select-jump-to'); 
    $.each($('#shoebox img'), function(idx, img) { 
    select.append('<option value="' + img.getAttribute('source') + '">Image ' + (idx + 1) + '</option>') 
    }); 

    select.on('change', function(e) { 
    $('.picture').attr({ 
     'src': e.target.options[e.target.selectedIndex].value, 
     'imageposition': e.target.selectedIndex + 1 
    }); 
    }); 

당신은 당신의 프렉스는/다음 버튼 또한, 드롭 다운을 변경하려면, 예를 들어 귀하의 이벤트에 설정하고있는 이미지 URL과 동일 드롭 다운의 값을 설정하려면 $('#select-jump-to').val(variableContainingnextImage)

다음은 드롭 다운과 버튼 모두 드롭 다운을 변경하는 코드입니다.

/* set first image in frame from #shoebox on document.ready */ 
 
$(function() { 
 
    var leadOff = $('#shoebox img:first-child').attr('source'); 
 

 
    $('.picture').attr({ 
 
    'src': leadOff, 
 
    'imageposition': '1' 
 
    }); 
 

 
    var select = $('#select-jump-to'); 
 
    $.each($('#shoebox img'), function(idx, img) { 
 
    select.append('<option value="' + img.getAttribute('source') + '">Image ' + (idx + 1) + '</option>') 
 
    }); 
 

 
    select.on('change', function(e) { 
 
    $('.picture').attr({ 
 
     'src': e.target.options[e.target.selectedIndex].value, 
 
     'imageposition': e.target.selectedIndex + 1 
 
    }); 
 
    }); 
 

 
}); 
 
/* load next image from #shoebox (click on image and/or next button) */ 
 
$('#pictureframe, #buttonright').click(function() { 
 
    var imageTally = $('#shoebox img').length; 
 
    var imagePosition = $('.picture').attr('imageposition'); 
 
    var plusOne = parseInt(imagePosition) + 1; 
 
    var nextUp = $('#shoebox img:nth-child(' + plusOne + ')').attr('source'); 
 
    var select = $('#select-jump-to'); 
 
    if (imagePosition == imageTally) { 
 
    var leadOff = $('#shoebox img:first-child').attr('source'); 
 
    $('.picture').attr({ 
 
     'src': leadOff, 
 
     'imageposition': '1' 
 
    }); 
 
    select.val(leadOff); //update the dropdown as well. 
 
    } else { 
 
    $('.picture').attr({ 
 
     'src': nextUp, 
 
     'imageposition': plusOne 
 
    }); 
 
    select.val(nextUp);//update the dropdown as well. 
 
    } 
 
}); 
 

 
/* load previous image from #shoebox (click on prev button) */ 
 
$('#buttonleft').click(function() { 
 
    var imageTally = $('#shoebox img').length; 
 
    var imagePosition = $('.picture').attr('imageposition'); 
 
    var minusOne = parseInt(imagePosition) - 1; 
 
    var nextUp = $('#shoebox img:nth-child(' + minusOne + ')').attr('source'); 
 
    var select = $('#select-jump-to'); 
 
    if (imagePosition == '1') { 
 
    var lastPic = $('#shoebox img:last-child').attr('source'); 
 
    $('.picture').attr({ 
 
     'src': lastPic, 
 
     'imageposition': imageTally 
 
    }); 
 
    select.val(lastPic); //update the dropdown as well. 
 
    } else { 
 
    $('.picture').attr({ 
 
     'src': nextUp, 
 
     'imageposition': minusOne 
 
    }); 
 
    select.val(nextUp); //update the dropdown as well. 
 
    } 
 
}); 
 

 
/* Add arrow keyboard navigation */ 
 
function GoToLocation(url) { 
 
    window.location = url; 
 
} 
 
Mousetrap.bind("right", function() { 
 
    document.getElementById('buttonright').click(); 
 
}); 
 

 
function GoToLocation(url) { 
 
    window.location = url; 
 
} 
 
Mousetrap.bind("left", function() { 
 
    document.getElementById('buttonleft').click(); 
 
});

body { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    width: 100%; 
 
} 
 
#wall { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 6px; 
 
    background-color: hsla(0, 0%, 20%, 1); 
 
} 
 
#pictureframe { 
 
    display: flex; 
 
    padding: 6px; 
 
    background-color: hsla(0, 0%, 40%, 1); 
 
} 
 
#pictureframe img { 
 
    display: flex; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#buttonswrapper { 
 
    display: flex; 
 
    flex-grow: 1; 
 
} 
 
#jumpto { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#buttonleft, 
 
#buttonright { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-grow: 1; 
 
    padding: 6px; 
 
    color: hsla(40, 20%, 70%, 1); 
 
    font-variant: small-caps; 
 
    font-weight: bold; 
 
    font-family: Verdana, sans-serif; 
 
    background-color: hsla(0, 0%, 40%, 1); 
 
    cursor: pointer; 
 
} 
 
#buttonleft:hover, 
 
#buttonright:hover { 
 
    background-color: hsla(50, 50%, 40%, 1); 
 
} 
 
#shoebox { 
 
    display: none; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script> 
 
<div id="wall"> 
 
    <div id="pictureframe"> 
 
    <img class="picture" src=""> 
 
    </div> 
 
    <div id="buttonswrapper"> 
 
    <div id="buttonleft">prev</div> 
 
    <div id="buttonright">next</div> 
 
    </div> 
 
    <div id="jumpto"> 
 
    <select id="select-jump-to"></select> 
 
    </div> 
 
</div> 
 
<div id="shoebox"> 
 
    <!-- prevent loading all images by changing src to source --> 
 
    <img source="http://i.imgur.com/tL6nW.gif"> 
 
    <img source="http://i.imgur.com/BfZ5f.gif"> 
 
    <img source="http://i.imgur.com/mR7wo.gif"> 
 
</div>