Loop через 100 фоновых изображений на клик - PullRequest
Новая
       6

Loop через 100 фоновых изображений на клик

0 голосов
/ 03 октября 2009

а) У меня есть 100 фоновых изображений тела

б) и одна ссылка

Фоновое изображение должно меняться на следующее в лоте при каждом нажатии на ссылку, проходя через лот один за другим (было бы неплохо, если бы отображалось также имя / номер текущего изображения).

Все изображения находятся в специальном каталоге. jQuery уже загружен.

Кто-нибудь знает, где я могу найти код, чтобы сделать это просто?

Всего наилучшего ...

Ответы [ 3 ]

1 голос
/ 03 октября 2009 
var allImages = ["path/to/image2", "path/to/image1"];


$(document).ready(function() {
    $("#theLink").click(function() {
        var newImageLink = allImages.pop();
        $("body").css("background-image", "url(" + newImageLink + ")");
    });
});
0 голосов
/ 03 октября 2009

Вам не обязательно указывать путь к изображениям таким образом. Вы можете назвать ваши изображения как-то как image_xxx.png, 1 - 100 и ссылаться на это имя в одном месте. Таким образом, если вам когда-нибудь понадобится изменить имя, вы можете легко сделать это в одном месте. Кроме того, убедитесь, что атрибут href тега привязки установлен на #, чтобы предотвратить перезагрузку страницы при каждом щелчке.

Вот более полное решение, которое также выполняет проверку диапазона и обходит, когда мы достигаем нашего предела: 

<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>
0 голосов
/ 03 октября 2009

(добавлен счетчик к ответу 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;
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...