Аккуратный перебор картинок

Тема в разделе "Другие языки", создана пользователем sk8er, 17 май 2009.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. sk8er

    sk8er SEO и SMO гуру :3

    Регистр.:
    21 июл 2008
    Сообщения:
    398
    Симпатии:
    25
    Нужна такая весчь. Сейчас в шапке с помощью css поставлены баннеры в шапке примерно посередине, идёт ротация при каждом обновлении странички. Нужно сделать так, чтоб в том месте была плавная ротация без перезагрузки, тоесть на пример каждые 30 секунд плавно, с права на лева переходила другая картинка с активной ссылкой. Переход на javascript. Как это осуществить?
    И нужно чтоб каждый раз картинки шли хаотично, то есть в разброс, а то у многих скриптов постоянно начинается с одного и того же баннера и идут всегда одинаковым порядком, а нужно, как сказал, чтоб шло всё в разброс.
    Есть ли такое? И как это всё подогнать? :) Сама картинка размером 410*104. Вот css-ка вывода баннера в шапке:
    HTML:
    	div.banner-site{
    		top: 141px;
    		right: 35px;
    		position: absolute;
    	}
     
  2. lorien

    lorien Постоялец

    Регистр.:
    2 авг 2006
    Сообщения:
    84
    Симпатии:
    11
    В чём смысл вопроса? Вы знаете javascript? Что конкретно не получается?
     
  3. sk8er

    sk8er SEO и SMO гуру :3

    Регистр.:
    21 июл 2008
    Сообщения:
    398
    Симпатии:
    25
    Вопрос в том как это сделать) javascript не знаю)
     
  4. Drak0n4ik

    Drak0n4ik Создатель

    Регистр.:
    8 май 2009
    Сообщения:
    25
    Симпатии:
    1
    Заменить картинку будет несложно
    только вот как анимацию сделать - без понятия :(

    Код:
    Javascript:
    function changeImage()
    {
      var Bannersrc = new Image();
    
      Bannersrc[0] = "imagesrc0";
      Bannersrc[1] = "imagesrc1";
      Bannersrc[2] = "imagesrc2";
      Bannersrc[3] = "imagesrc3";
      Bannersrc[4] = "imagesrc4";
      Bannersrc[5] = "imagesrc5";
      Bannersrc[6] = "imagesrc6";
      Bannersrc[7] = "imagesrc7";
      Bannersrc[8] = "imagesrc8";
      Bannersrc[9] = "imagesrc9";
      Bannersrc[10] = "imagesrc10";
    
      shownum = Math.random() * 10;
      shownum = Math.round(shownum);
      document.getElementById("image").src = Bannersrc[shownum]; // в теге имг с ID=image заменяет адрес картинки, 
      setInterval("changeImage()",10000); // 10 секунд для замены картинки
    }
    
    
    
    HTML:
    <body onload="changeImage()">
    <img id="image" src="imagesourcedefault">
    </body>
    
     
  5. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    а анимацию сделать с jquery плагином cycle
    http://malsup.com/jquery/cycle/

    берутся все элементы в указаном элементе и прокручиваются случайно
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.cycle.all.min.js"></script>
    <script language="JavaScript" type="text/javascript">
    $('#rotator').cycle({ 
        random:  1,
        fx: 'scrollLeft',
        speed:    2000,  //2 секунды прокрутка
        timeout:  30000, //30 секунд пауза
    });
    </script>
    
    </head>
    
    <body>
    
    <div id="rotator"> 
        <a href="https://nulled.cc"><img src="1.jpg" width="300" height="100" />1</a>
        <a href="https://nulled.cc"><img src="2.jpg" width="300" height="100" />2</a>
        <a href="https://nulled.cc"><img src="3.gif" width="300" height="100" />3</a>
        <a href="https://nulled.cc"><img src="4.gif" width="300" height="100" />4</a>
    </div>
    
    
    </body>
    </html>
    
     

    Вложения:

    • rotator.zip
      Размер файла:
      47,5 КБ
      Просмотров:
      12
    sk8er, andrnag и Black#FFFFFF нравится это.
  6. Kalb Raa_Lb

    Kalb Raa_Lb Постоялец

    Регистр.:
    5 май 2009
    Сообщения:
    102
    Симпатии:
    25
    посмотри вот тут
    _dynamicdrive.com/dynamicindex17/featuredcontentglider.htm
    вроде как можно и картинки таким образом и тексты и даже видео выводить и сменять

    а также есть просто крутилки картинок

    (описание если инглишь не знаешь можешь глянуть через переводчик гугла, если что :) )
     
  7. sk8er

    sk8er SEO и SMO гуру :3

    Регистр.:
    21 июл 2008
    Сообщения:
    398
    Симпатии:
    25
    polyetilen
    В этих строчках видно:
    HTML:
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.cycle.all.min.js"></script>
    что нужны файлы jquery-1.3.2.min.js и jquery.cycle.all.min.js. А где их именно взять?) на сайте что то не нашёл(
     
  8. lorien

    lorien Постоялец

    Регистр.:
    2 авг 2006
    Сообщения:
    84
    Симпатии:
    11
  9. sk8er

    sk8er SEO и SMO гуру :3

    Регистр.:
    21 июл 2008
    Сообщения:
    398
    Симпатии:
    25
    lorien
    да, очень полезная штука гугл, вижу что пользоваться умеешь, молодец. Но я же просил именно определённые файлы. Возьму как всегда что то не то - пойдёт не так как нужно и прочее.
     
  10. lorien

    lorien Постоялец

    Регистр.:
    2 авг 2006
    Сообщения:
    84
    Симпатии:
    11
Статус темы:
Закрыта.