ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Автоматическая смена фона для сайта uCoz

Автоматическая смена фона для сайта uCoz

Автоматическая смена фона для сайта 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;
}

Внимание: Поставил в низ сайта в самый низ, все отлично работает и выводит и все эффекты присутствуют, но главное теперь на всех страницах будет производить.
06 Августа 2017 Просмотров: 1927 Комментариев: (10)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 10
Critic©
Critic© 09 Августа 2017 14:251
0
Красиво смотрится, как раз под тему кино онлайн можно установить.
Kosten
Kosten 09 Августа 2017 14:342
0
Не скажу, что только кино онлайн, много тем, где можно менять автоматический фон.
Critic©
Critic© 10 Августа 2017 01:583
0
Есть сайты, что там теже скрипты и всякие эффекты, что тоже подойдет, другое дело на них фон не найти.
Kosten
Kosten 10 Августа 2017 02:154
0
Здесь только на ум кино онлайн приходит, безусловно есть тематики где можно поставить несколько фонов. Это можно и на сайт скриптами, где сделать светлый фон, а заменяет его светло серый, чтоб не было такого, с начало белый и потом цветной, палитра красок теряется.
-SAM-
-SAM- 11 Августа 2017 04:445
0
В данному случае, имею в виду, что при использовании этого решения на сайте в системе uCoz, подключение еще одной библиотеки jquery - будет излишне (это тем, кто будет ставить себе... ведь по умолчанию на всех сайтах системы есть подключенная библиотека, а ее версия - выбирается в общих настройках панели управления).
Kosten
Kosten 11 Августа 2017 13:257
0
Вообще, можно этот код поставить на другую систему. Просто, в название чтоб не у поменять, чисто под юкоз заточен, а точнее дописывать для uCoz.
Kosten
Kosten 11 Августа 2017 11:446
0
Можно и не подключать, читал тоже, что у конструктора по умолчанию идет, но все же решил прописать, так как возможно кто то не на конструктор будет химию делать.
Zveraboy
Zveraboy 16 Января 2018 17:498
0
А как сделать смена картинок по времени примерно каждый 20 мин что-бы они менялесь? помогите
Kosten
Kosten 16 Января 2018 18:169
0
Не, помню, какая функция за время отвечает, но это делается в самом скрипте, если она есть.
-SAM-
-SAM- 16 Января 2018 23:4010
0
Для этого походу придётся делать через куки, поскольку вряд ли человек будет страницу смотреть целых 20 минут. Ну, а здесь в скрипте время записано в setTimeout, где 30000 = 30k ms = 30 sec (нужно ставить такое значение, чтобы запредельных не было, иначе смены фона дождутся единицы и увидят).
avatar