Движущаяся лента с изображениями, при наведении мыши останавливается
Каждый кадр может быть отдельной ссылкой...
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>