1
我有一個JavaScript更改圖像scr，當你點擊它，它會循環。它也有導航鏈接和箭頭鍵盤導航。試圖將缺失的img屬性添加到自定義javascript
我很難添加圖像屬性的寬度，高度和alt到img scr。目前，當您查看最終結果時，它顯示：<img class="picture" src="http://i.imgur.com/tL6nW.gif" imageposition="1">
它目前缺少寬度，高度和替換值。在我的HTML內容中，我已經包含了寬度，高度和alt，但是javascript似乎沒有將這些屬性添加到最終結果中。任何人都可以幫我修復我的代碼？
/* 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" width="100" height="100" alt="pic1">
<img source="http://i.imgur.com/BfZ5f.gif" width="100" height="100" alt="pic2">
<img source="http://i.imgur.com/mR7wo.gif" width="100" height="100" alt="pic3">
</div>