Thêm hộp thả xuống chọn vào hình ảnh hoán đổi onclick js

Question

Tôi có một javascript thay đổi hình ảnh scr khi bạn bấm vào hình ảnh và nó sẽ chu kỳ thông qua. Nó cũng có các liên kết phân trang với điều hướng bàn phím mũi tên. Những gì tôi muốn làm là thêm một hộp danh sách thả xuống chọn cho phép tôi chuyển đến bất kỳ hình ảnh nào tôi muốn. Tôi có thể làm cái này như thế nào? Tôi chỉ muốn có một chọn danh sách thả xuống mà không có một nút gửi

/* 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

Tôi muốn bắt đầu với một danh sách thả xuống trống tự động populates bản thân với các nguồn hình ảnh từ danh sách của bạn như các giá trị tùy chọn, sau đó có sự kiện thả xuống changed sự kiện của hình ảnh mà nó tải dựa trên tùy chọn đã chọn. Dưới đây là những gì tôi đã đưa ra rằng sau thiết lập của bạn:

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 
    }); 
    }); 

Nếu bạn muốn Prex/nút Tiếp theo bạn để cũng thay đổi thả xuống, đặt giá trị của thả xuống bằng với imageurl bạn đang thiết trong các sự kiện của bạn, ví dụ $('#select-jump-to').val(variableContainingnextImage)

Đây là mã của bạn có cả trình đơn thả xuống và các nút cũng sẽ thay đổi trình đơn thả xuống.

/* 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>