Es ist schwer zu verstehen, was Sie suchen. Fügen Sie einige Details in Ihre Frage ein. ABER: Ich habe ein Beispiel dafür gemacht, wie man zumindest das src oder ein Bild ändern kann.
Der einfachste Weg (nicht die beste oder intelligenteste Methode) ist das Attribut src in Ihren Bildern zu ändern. Ich habe eine Geige gemacht, um zu zeigen, was ich meine. https://jsfiddle.net/nbhey2nz/ Kurz gesagt: Wenn Sie auf die erste Schaltfläche klicken, ändert sich die Quelle auf den Bildern 1-3. Wenn Sie auf die zweite Schaltfläche klicken, ändert sich die Quelle auf den Bildern 4-6.
HTML:
<div id="image">
<img id="img-1" src="..... " />
<img id="img-2" src="..... " />
<img id="img-3" src="..... " />
<img id="img-4" src="..... " />
<img id="img-5" src="..... " />
<img id="img-6" src="..... " />
<img id="img-7" src="..... " />
<img id="img-8" src="..... " />
</div>
<div>
<button id="oneToThree">
Change 1-3
</button>
<button id="fourToSix">
Change 4-6
</button>
</div>
jQuery:
$(function(){
$("#oneToThree").click(function(){
$("#img-1").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-2").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
$("#img-3").attr("src", "http://www.small-hydro.com/images/home_btn_small.jpg");
});
$("#fourToSix").click(function(){
$("#img-4").attr("src","https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-5").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
$("#img-6").attr("src", "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif");
});
})
UPDATE! Wenn ich Ihre aktualisierte Frage richtig verstehe, möchten Sie dies mit einem Operator < und > tun, richtig?
Nun, ich habe meine Fiddle aktualisiert, um zu Ihrem Update zu passen: https://jsfiddle.net/nbhey2nz/2/ Dieses Mal tun Sie es auf eine JavaScript-Weise, also erhalten Sie beide Versionen. Beachten Sie, dass ich die Bild-ID auf nur die Ganzzahl geändert habe, nicht die img-1 Weise. Sie könnten es auch so machen, aber dann müssten Sie den Text zuschneiden, und das ist nicht das, wonach Sie gefragt haben! ;)
HTML:
<div id="image">
<img id="1" src="..... " />
<img id="2" src="..... " />
<img id="3" src="..... " />
<img id="4" src="..... " />
<img id="5" src="..... " />
<img id="6" src="..... " />
</div>
<div>
<button id="oneToThree">
Change images
</button>
</div>
JS:
$(function(){
$("#oneToThree").click(function(){
for(var i = 0; i < document.images.length; i++){
if(document.images.item(i).id <= 3){
document.images.item(i).src = "http://www.small-hydro.com/images/home_btn_small.jpg";
} else if(document.images.item(i).id > 3 && document.images.item(i).id < 6){
document.images.item(i).src = "https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus-Over.gif";
} else {
document.images.item(i).src = "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png";
}
}
});
})
Sieht gültig html nicht. Bitte geben Sie uns den richtigen Code an. – Robert
was bedeutet das mit weniger als 3 und poste den Code, was du bisher probiert hast (Javascript/jquery). – Sumanta736
Nicht ganz sicher, was gefragt wird bitte seien Sie klarer, was Sie wollen, dass das Javascript tut. Was ich daraus machen kann, scheint eine Art Karussell zu sein. Wenn ja, benutzen Sie einfach das Eulenkarussell. – jsg