a) Je 100 images corps-fondEn boucle 100 fond-images onclick
b) et un seul lien
L'image de fond devrait passer à la suivante dans le lot à chaque fois que le lien est cliqué, passant à travers le lot un par un (serait bien si le nom/numéro de l'image actuelle est également affiché).
Les images sont toutes dans un répertoire dédié. jQuery est déjà chargé. Est-ce que quelqu'un sait où je peux trouver le code pour le faire simplement?
Bonne chance ...
Vous ne devez pas nécessairement coder en dur le chemin de vos images de cette façon. Vous pouvez nommer vos images quelque chose comme image_xxx.png, 1 - 100 et se référer à ce nom en un seul endroit. De cette façon, si vous avez besoin de changer le nom, vous pouvez facilement le faire en un seul endroit. En outre, assurez-vous que l'attribut href de la balise anchor est défini sur # pour empêcher le rechargement des pages à chaque clic.
est ici une solution plus complète qui fait aussi la vérification de gamme et il enroule autour lorsque nous atteignons notre limite:
<script language="javascript" type="text/javascript">
<!--
var ctr = 0;
$(document).ready(function() {
nextBg();
});
function nextBg()
{
++ctr;
if(ctr <= 100)
{
$("body").css("background-image", "url(images/image_" + ctr + ".png)");
$("#message").text("Current image: " + "image_" + ctr + ".png");
if(ctr == 100)
ctr = 0;
}
}
//-->
</script>
</head>
<body>
<div>
<span id="message"></span><br />
<a href="#" onclick="nextBg();" />Next</a>
</div>
</body>
Merci à tous pour vos aimables réponses. Je dois à 'zdawg' un «merci» supplémentaire pour sa réponse réfléchie et informative et son code qui fait tout ce que je demande et qui fonctionne comme un charme. Problème résolu. La communauté 'stackoverflow' se bouscule. Tout le meilleur ... – terrestrial
var allImages = ["path/to/image2", "path/to/image1"];
$(document).ready(function() {
$("#theLink").click(function() {
var newImageLink = allImages.pop();
$("body").css("background-image", "url(" + newImageLink + ")");
});
});
(contre ajouté à la réponse de gs)
var allImages = ["path/to/image2", "path/to/image1"];
var counter = 0;
$(document).ready(function() {
$("#theLink").click(function() {
var newImageLink = allImages.pop();
$("body").css("background-image", "url(" + newImageLink + ")");
$("#displayhere").html("<b>"+ counter +"</b>");
counter = counter + 1;
});
});
Merci à tous pour vos réponses aimables. Je dois à 'zdawg' un «merci» supplémentaire pour sa réponse réfléchie et informative et son code qui fait tout ce que je demande et qui fonctionne comme un charme. Problème résolu. La communauté 'stackoverflow' se bouscule. Tout le meilleur ... – terrestrial