Динамически кликабельный фон
 | |
| Всем привет, многие спрашивали скрипт для установки фона чтоб он был кликабельный и не был постоянный, мы не смогли пройти мимо такого и сделали. Скрипт удобно подойдет для рекламы так как многие используют именно его для этого!... Также в скрипте вы можете настроить тайм аут смены ссылки и картинки. Установка: 1. Установим html код с начальной ссылкой: Код <div id="uLink" onclick="location='http://zornet.ru/'"></div> Заменить ссылку в html на свою 2. ДобавимCSS стиль к нашему html: Код #uLink {background:url(http://j-p-g.net/if/2016/05/15/0216796001463347886.jpg);height:100%;width:100%;position:fixed;display:inline-block;top: 0px;background-size:cover !important;left:0px;cursor:pointer;} Заменить ссылку фона на свой фон для ссылки!. 3. Добавим js смену фона и сылки (Тайм аут смены 15 секунд): Код <script> var bgArr = ["1.jpg", "2.jpg", "3.jpg"]; var bgLnk = ["1.ru", "2.ru", "3.ru"]; var i=0; var interval = self.setInterval("img()", 15000) function img() { if (i>(bgArr.length-1) || i>(bgLnk.length-1)) { i=0 $("#uLink").css("background", "url("+bgArr[i]+")"); $("#uLink").attr("onclick", "location='"+bgLnk[i]+"'"); } else { $("#uLink").css("background", "url("+bgArr[i]+")"); $("#uLink").attr("onclick", "location='"+bgLnk[i]+"'"); } i++; } </script> Разберем скрипт: 1. Переменная картинок: var bgArr = ["1.jpg", "2.jpg", "3.jpg"]; 2. Переменная сылок: var bgLnk = ["1.ru", "2.ru", "3.ru"]; В них ставим ссылки на картинки и ссылки для этих картинок соответственно!. Изменить время обновления вы можете сменив число 15000 (15сек) на свое время!... | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
