Гость !!! | RSS
Сегодня на сайте
Новые сообщения Участники Правила форума Поиск RSS
  • Страница 1 из 1
  • 1
Модератор форума: Khufu  
Форум » Скрипты » Эффекты..., трюки... » Слайд-шоу Карусель (Движущаяся лента с изображениями)
Слайд-шоу Карусель
« Azzazil666 » Дата: Вторник, 21 Сентября 2010, 23:56:23 | Сообщение # 1
Князь - Мира Сия
Azzazil666
«Администратор»
Сообщений: 418
Замечания: ±
Статус Настроения: [редактировать]
Отсутствует

Движущаяся лента с изображениями, при наведении мыши останавливается
Каждый кадр может быть отдельной ссылкой...

Code
<script type="text/javascript">
var Car_Image_Width = 100;
var Car_Image_Height = 70;
var Car_Border = true;
var Car_Border_Color = "white";
var Car_Speed = 5;
var Car_Direction = true;
var Car_NoOfSides = 12;
Car_Image_Sources = new Array
    (
    "http://shalbuzdag-666.ucoz.ru/Demo/Effekt/kuchSlide/clock.jpg", "/index/11",
    "http://shalbuzdag-666.ucoz.ru/Demo/Effekt/kuchSlide/kupe.jpg", "/index/12",
    "http://shalbuzdag-666.ucoz.ru/Demo/Effekt/kuchSlide/aquarium.jpg", "/index/14",
    "http://shalbuzdag-666.ucoz.ru/Demo/Effekt/kuchSlide/raketa.jpg", "/index/16",
    "http://shalbuzdag-666.ucoz.ru/Demo/Effekt/kuchSlide/sound.jpg", "/index/18",
    "http://shalbuzdag-666.ucoz.ru/Demo/Effekt/kuchSlide/city.jpg", "/index/19"
    );
CW_I = new Array(Car_NoOfSides / 2 + 1);
C_ClcW = new Array(Car_NoOfSides / 2);
C_Coef = new Array
    (
    3 * Math.PI / 2,
    0,
    3 * Math.PI / 2,
    11 * Math.PI / 6,
    Math.PI / 6,
    3 * Math.PI / 2,
    7 * Math.PI / 4,
    0,
    Math.PI / 4,
    3 * Math.PI / 2,
    5 * Math.PI / 3,
    11 * Math.PI / 6,
    0,
    Math.PI / 6,
    Math.PI / 3
    );
var C_CoefOf = Car_NoOfSides == 4 ? 0 : Car_NoOfSides == 6 ? 2 : Car_NoOfSides == 8 ? 5 : 9;
C_Pre_Img = new Array(Car_Image_Sources.length);
var C_Angle = Car_Direction ? Math.PI/(Car_NoOfSides/2) : 0, C_CrImg = Car_NoOfSides, C_MaxW, C_TotalW,
C_Stppd = false, i, C_LeftOffset, C_HalfNo = Car_NoOfSides / 2;

function Carousel()
    {
    if (document.getElementById)
     {
     for (i=0; i<Car_Image_Sources.length; i+=2)
      {
      C_Pre_Img[i] = new Image();
      C_Pre_Img[i].src = Car_Image_Sources[i]
      }
     C_MaxW = Car_Image_Width / Math.sin(Math.PI / Car_NoOfSides) + C_HalfNo + 1;
     Car_Div = document.getElementById("Carousel");
     for (i=0; i<C_HalfNo; i++)
      {
      CW_I[i] = document.createElement("img");
      Car_Div.appendChild(CW_I[i]);
      CW_I[i].style.position = "absolute";
      CW_I[i].style.top = 20 + "px";
      CW_I[i].style.height = Car_Image_Height + "px";
      if (Car_Border)
       {
       CW_I[i].style.borderStyle = "solid";
       CW_I[i].style.borderWidth = 1 + "px";
       CW_I[i].style.borderColor = Car_Border_Color
       }
      CW_I[i].src = Car_Image_Sources[2 * i];
      CW_I[i].lnk = Car_Image_Sources[2 *i + 1];
      CW_I[i].onclick = C_LdLnk;
      CW_I[i].onmouseover = C_Stp;
      CW_I[i].onmouseout = C_Rstrt
      }
     CarImages()
     }
    }

function CarImages()
    {
    if (!C_Stppd)
     {
     C_TotalW = 0;
     for (i=0; i<C_HalfNo; i++)
      {
      C_ClcW[i] = Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf + i] + C_Angle)) * Car_Image_Width);
      C_TotalW += C_ClcW[i]
      }
     C_LeftOffset = (C_MaxW-C_TotalW) / 2;
     for (i=0; i<C_HalfNo; i++)
      {
      CW_I[i].style.left = C_LeftOffset + "px";
      CW_I[i].style.width = C_ClcW[i] + "px";
      C_LeftOffset += C_ClcW[i]
      }
     C_Angle += Car_Speed / 720 * Math.PI * (Car_Direction ? -1 : 1);
     if ((Car_Direction && C_Angle <= 0) || (!Car_Direction && C_Angle >= Math.PI / C_HalfNo))
      {
      if (C_CrImg == Car_Image_Sources.length) C_CrImg = 0;
      if (Car_Direction)
       {
       CW_I[C_HalfNo] = CW_I[0];
       for (i=0; i<C_HalfNo; i++) CW_I[i] = CW_I[i + 1];
       CW_I[C_HalfNo-1].src = Car_Image_Sources[C_CrImg];
       CW_I[C_HalfNo-1].lnk = Car_Image_Sources[C_CrImg + 1]
       }
      else
       {
       for (i=C_HalfNo; i>0; i--) CW_I[i] = CW_I[i - 1];
       CW_I[0] = CW_I[C_HalfNo];
       CW_I[0].src = Car_Image_Sources[C_CrImg];
       CW_I[0].lnk = Car_Image_Sources[C_CrImg + 1]
       }
      C_Angle = Car_Direction ? Math.PI / C_HalfNo :0 ;
      C_CrImg += 2
      }
     }
    setTimeout("CarImages()", 50)
    }

function C_LdLnk()
    {
    if (this.lnk) window.location.href = this.lnk
    }

function C_Stp()
    {
    this.style.cursor = this.lnk ? "pointer" : "default";
    C_Stppd = true;
    }

function C_Rstrt() { C_Stppd = false }

window.onload = Carousel;
    // -->
</script>

Сам слайд:

Code
<div id="Carousel" style="position: absolute; margin-left: 130px;""></div>

 
Форум » Скрипты » Эффекты..., трюки... » Слайд-шоу Карусель (Движущаяся лента с изображениями)
  • Страница 1 из 1
  • 1
Поиск:
мини-чат
Tagis Балаболка
Инфо сайта
Инфо форума

Все права защищены! shalbuzdag-666.ucoz.ru © 2009 – 2024 ()
уЧётчик сайта