Карусель из нескольких изображений

2013-02-18 | Javascript

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

Итак, чтобы сделать эту красивую карусель из картинок у себя на сайте, нужно вставить на страницу следующий html-код:

<html>
<head>
<title></title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<body onload="Carousel();";></body>

</html>
<!--Carousel-->
<script type="text/javascript">
	var Car_Image_Width=100;
	var Car_Image_Height=100;
	var Car_Border=true;
	var Car_Border_Color="#BCBFFF";
	var Car_Speed=10;
	var Car_Direction=true;
	var Car_NoOfSides=6;
	Car_Image_Sources=new Array(
		"http://vashsite.ru/image1.jpg","", // путь к изображению и текст при наведении
		"http://vashsite.ru/image2.gif","",
		"http://vashsite.ru/image3.jpg","",
		"http://vashsite.ru/image4.jpg","",
		"http://vashsite.ru/image5.jpg",""
		);
	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");//osw
			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=0+"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];//site.ru
					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}
</script>
<div id="Carousel" style="position:relative; left:100px; top:36px; width:270px; height:110px;"></div>

Теперь рассмотрим основные параметры, которые можно изменить в этом коде:

<!--Carousel-->
<script type="text/javascript">
var Car_Image_Width=100; // ширина картинок (у всех должна быть одинаковой)
var Car_Image_Height=100; // высота картинок (у всех должна быть одинаковой)
var Car_Border=true; // рамка вокруг картинок
var Car_Border_Color="#BCBFFF"; // цвет рамки
var Car_Speed=10; // скорость вращения
var Car_Direction=true;
var Car_NoOfSides=6;
Car_Image_Sources=new Array( // директории картинок:
"http://vashsite.ru/image1.jpg","",
"http://vashsite.ru/image2.gif","",
"http://vashsite.ru/image3.jpg","",
"http://vashsite.ru/image4.jpg","",
"http://vashsite.ru/image5.jpg",""
);

Остальную часть кода кроме последней строки вставляем без изменений.

Последняя строка кода:

<div id="Carousel" style="position:relative; left:100px; top:36px; width:270px; height:110px;"></div> // позиции блока карусели на html странице (отступы слева и сверху, ширина и высота (должна быть больше ширины карусели и высоты картинок)).

Результат во фрейме:

Поделиться:

Записи по теме:

13 комментариев к записи "Карусель из нескольких изображений"

Михаил от 10.05.2015 в 13:04 пишет:

Хорошая и простая в настройке карусель, но работает под всеми браузерами, кроме IE любых версий почему-то….(по крайней мере на денвере). У меня после подключения под IE вообще пропадают все стили и сама карусель не появляется естесственно…Может кто знает как решить проблему.

Ответить ↓
- Михаил от 12.05.2015 в 10:54 пишет:
  
  Сам себе и отвечаю: извиняюсь конечно, но проблема была в моей невнимательности и отчасти в «суровости» IE. В 1 строке комментариев в HTML при закрытии тега комментариев поставил » —!> «, а не просто » —> «. Все браузеры это «проглотили», а IE обрушил все стили. Всё работает!
  
  Ответить ↓
Александр от 18.03.2016 в 19:44 пишет:

Подскажите пожалуйста, как сделать, чтобы 4 таких карусели одновременно вращались на одной странице сайта?

Ответить ↓
- Никита от 18.03.2016 в 21:56 пишет:
  
  Проще сделать 4 html файла, и через фреймы разместить на сайте.
  
  Ответить ↓
бампер от 26.11.2016 в 23:07 пишет:

как поставить карусель в центр сайта

Ответить ↓
- Никита от 30.11.2016 в 21:36 пишет:
  
  Можно использовать теги center
  
  Ответить ↓
Татьяна от 05.02.2017 в 08:59 пишет:

Подскажите пожалуйста, как такую карусель сделать лайт-боксом.

Ответить ↓
- Никита от 05.02.2017 в 13:15 пишет:
  
  К сожалению, не подскажу.
  
  Ответить ↓
Михаил от 11.02.2017 в 16:59 пишет:

карусель замечательная, но вопрос:
открыл в firefox страницу, включил firebug вкладку network — там диаграммы загрузки файлов по времени… Почему- то фото задействованные в карусели — снова и снова грузятся…. то есть идут заголовки — туда-обратно…то есть нагрузка на сервер? …и вроде даже не из кеша….
Я вообще-то дилетант — может чего-то не понял или глюк в браузере.. — или это действительно так — проверьте — кто больше меня в этом соображает…

Ответить ↓
- Никита от 11.02.2017 в 20:54 пишет:
  
  Покажите, посмотрю
  
  Ответить ↓
  - Михаил от 12.02.2017 в 14:29 пишет:
    
    …вообще — вроде из кеша грузятся, но всё равно странно всё это… куда скинуть скриншот?
    
    Ответить ↓
    - Никита от 12.02.2017 в 15:18 пишет:
      
      А посмотреть на сайте можно?
      
      Ответить ↓
      - Михаил от 12.02.2017 в 16:35 пишет:
        
        сайт только в процессе…. будет через месяц (надеюсь..!) да ладно… работает вроде всё…
        просто я сейчас как раз кеширование смотрю и обнаружил эту странность….