當div被點擊時，從數組jQuery中循環img src

我已經閱讀了堆棧交換和其他網站上的無數解決方案，它們都不適合我。我想要一個div包含一個img，箭頭兩邊。當您使用箭頭時，javascript應將img src更改爲圖像數組中的下一個元素。我是JavaScript新手，所以請在編寫回復時考慮這一點。謝謝。這裏是一個jfiddle http://jsfiddle.net/CZKAB/1/當div被點擊時，從數組jQuery中循環img src

下面是HTML

<div id="filter-one" class="filter"> 
<div class="filter-nav"> 
<div id="prev-button"><img src="img/prv.png" alt="prev" title="Previous"></div> 
</div> 

<div id="filter-one-canvas"> 
<img src="img/shelter.png" id="filter-one-img" alt="filter1" title="Filter One"> 
</div> 

<div class="filter-nav"> 
<a href="javascript:nextImage('#filter-one-img')" alt=""><img src="img/nxt.png" alt="next" title="Next"></a> 
</div> 
</div>

CSS

.filter { 
height: 100px; 
} 

.filter-nav { 
height: 52px; 
width: 52px; 
border-radius: 100%; 
background-color: rgba(0,204,0,1); 
opacity: 0.7; 
float: left; 
margin-top: 24px; 
} 

#filter-one img { 
float: left; 
}

的Javascript

$(document).ready(function() { 

var filterOneImages = new Array(); 

filterOneImages[0] = new Image(); 
filterOneImages[0].src = '../img/shelter.png'; 

filterOneImages[1] = new Image(); 
filterOneImages[1].src = '../img/food.png'; 

filterOneImages[2] = new Image(); 
filterOneImages[2].src = '../img/energy.png'; 

filterOneImages[3] = new Image(); 
filterOneImages[3].src = '../img/transport.png'; 

filterOneImages[4] = new Image(); 
filterOneImages[4].src = '../img/economy.png'; 

/*------------------------------------*/ 

function nextImage(element) 
{ 
var img = document.getElementById(element); 

for(var i = 0; i < filterOneImages.length;i++) 
{ 
if(filterOneImages[i].src == img.src) 
     { 
if(i === filterOneImages.length){ 
document.getElementById(element).src = filterOneImages[0].src; 
break; 
} 
document.getElementById(element).src = filterOneImages[i+1].src; 
break; 
} 
} 
} 

$('div.filter-nav').mouseenter(function() { 
$(this).fadeTo('fast', 1); 
}); 
$('div.filter-nav').mouseleave(function() { 
$(this).fadeTo('fast', 0.7); 
}); 
});

來源

2014-01-30 Joshua Flood

捷徑：VAR圖像=「shelter.png，food.png，energy.png，transport.png，economy.png'.split（」「）; –

感謝Diodeus :) –

你正在改變含有img而不是src屬性div的img本身，替換：

$("#filter-one-img").attr(...

與

$("#filter-one-img img").attr(...

來源

2014-01-30 21:50:31

當div被點擊時，從數組jQuery中循環img src

回答

相關問題