Автоматическая смена фона для сайта uCoz
Здесь вы узнаете как красиво сделать смену фона на сайте, где не нужна перезагрузка страницы, хотя и с ней также будет меняться фон. Плюс в том, что здесь стоит красивый эффект появление нового фона. Так как некоторые фон для сайта начинают частично только появляться. Здесь так заменено, что плавно все будет появляться. А это изначально визуально немного видно и потом идет проявление полного фона, что красиво смотрится. На тестовый сайт установил, так как по какому то промежутку времени автоматически должно меняться, здесь есть такая функция, что от вас не чего не зависит, но только те фоны, что выставите. Но это понятно, что больше под такие сайты как кино сайт больше подойдет. Но если есть у вас несколько изображений или просто фон, чтоб соответствовал тематике вашего сайта. То безусловно можно поставить, что этим удивить как пользователя или гостей. Но проверил при перезагрузки сайта или просто переходя на главную страниц, что все корректно выводит. Что сейчас подождал некоторое время, и автоматом сменился фон сайта и как перелистывание происходило. Что сделано оригинально, где думаю вы встречали такие ресурсы, что вы не чего не делаете, а где то через 30 секунд или 45 смена происходит. Но вообщем вы поняли о чем идет речь, что теперь переходим главному, как установить его. Приступаем к установке: Если вы хотите на главной странице сделать, то перед body нужно поставить этот скрипт. Там же и прописываем ссылки, которые по кругу будут друг друга менять. Но также можно попробовать поставить в низ сайта, чтоб на всех страницах это работало. Поставил так: Что вы можете на всех страницах, если у вам один модуль, то это в категориях и разделе поставить или все же в низ сайта попробовать, что должно сработать по всему ресурсу. Код <img src="" alt="background" id="bg" style="display:none" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" class="noprint"> var aImages = new Array(); var aURL = new Array(); var aArtists = new Array(); var iPrev = -1; var iRnd = -1; aImages[0] = "http://zornet.ru/_fr/56/6413141.jpg"; aImages[1] = "http://zornet.ru/_fr/56/1676362.jpg"; aImages[2] = "http://zornet.ru/_fr/56/2694324.jpg"; aImages[3] = "http://zornet.ru/_fr/56/1366999.jpg"; $(document).ready(function() { $("img#bg").load(function() { $("img#bg").fadeTo(2000,1); setTimeout(function() { $("#image_description").animate({right: '-=150'}, 1000); $("img#bg").fadeOut(2000); setTimeout(LoadImages,2500); } ,30000); } ) setTimeout(LoadImages,1000); }); function LoadImage(iNr) { $("img#bg").attr("src", aImages[iNr]); }; function LoadImages() { /* Выберите номер случайного изображения и убедитесь, что это не соответствует предыдущему изображению */ while(iPrev == iRnd) { iRnd = Math.floor(Math.random()*aImages.length); } /* Показать выбранное изображение */ LoadImage(iRnd); iPrev = iRnd; }; </script> Чтоб все корректно на всю ширину был фон, то нужно добавить стиль в CSS: Код img#bg { position: fixed; top:0; left:0; width:100%; z-index:-3; } Внимание: Поставил в низ сайта в самый низ, все отлично работает и выводит и все эффекты присутствуют, но главное теперь на всех страницах будет производить. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 10 | |
| |