CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 293   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

11

Ротатор баннеров, ссылок, текста

Jemand 16021 , ,
JavaScript

1. CSS

#container {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	border: 1px solid #ccc;
	}
#block1, #block2, #block3 {
	margin: 10px;
	display: none;
	font-size: 14px;
	font-family: Georgia;
	}

2. JavaScript

<script type="text/javascript">
	var elements = 3;	 //количество div-элементов с текстом
	var time = 3; 		//задержка смены текста по времени в секундах
	var currentText = 0;
	var color = 255;
	noElement = elements + 1;
	time = time*1000;
	function blockRotator () {
		currentText++;
		if (currentText == noElement) {
			currentText = 1;
		}
		if (currentText == 1) {
			prevText = elements;
		}
		else {
			prevText = currentText - 1;
		}
		var hide = document.getElementById('block'+prevText);
		hide.style.display = 'none';
		var show = document.getElementById('block'+currentText);
		show.style.display = 'block';
		setTimeout('blockRotator()', time);
	}
	window.onload = blockRotator;
</script>

3. HTML

<div id="container">
	<div id="block1"><img src="img.jpg"></div>			<!-- Картинка -->
	<div id="block2"><a href="site_ru">Ссылка</a></div>	<!-- Ссылка -->
	<div id="block3">Просто текст без HTML тегов.</div>	<!-- Просто текст -->
</div>

Демо

Рекламная пауза

» 11 комментариев

  1. Добрый день!
    Хочу на свой сайт ротатор по типу:
    _center-svarki21.fis.ru
    Отличие от простого в том, что все “картинки с описанием и фото” поочередно перелистываются без участия пользователя.

    Подскажите,пожалуйста, как это сделать.

    • Пардон, не точно сформулировал: внизу еще есть возможность для пользователя (цифры 1,2…5) листать самому и вернуться на тот блок,что заинтересовал.

    • Для этого варианта можно использовать следующий код
      CSS

      #container {
      	width: 440px;
      	height: 220px;
      	margin: 0 auto;
      	border: 1px solid #ccc;
      	}
      #block1, #block2, #block3 {
      	margin: 10px;
      	display: none;
      	font-size: 16px;
      	font-family: Georgia;
      	}
      #text {
      	width: 200px;
      	height: 200px;
      	border: 1px solid #000;
      	float: left;
      	}
      #img {
      	width: 200px;
      	height: 200px;
      	border: 1px solid #000;
      	float: right;
      	}
      

      HTML

      <div id="block1"><div id="text">Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</div><img src="http://smotra.ru/data/img/galleries/19714/23979/sm_img-226950_180x180.jpg" id="img"></div>
      
  2. скажите а как исправить код, чтобы блоки выводились при перезагрузке страницы последовательно, а не рандомно….именно чтоб блоки показывались подряд….спасибо

  3. Я имел ввиду, чтоб не по таймеру выводились, а по рефрешу страницы. заменил строчку setTimeout(‘blockRotator()’, time); на document.write(blockRotator());

    но блоки выводятся рандомно…вот сейчас скрипт пробую… к примеру блок 3, 5 раз показывался подряд, а как сделать, чтоб выводились 1,2,3,4,5…..

  4. А возможно в этом ротаторе настроить эффект перехода? Ну, скажем, чтобы картинки “ползли” справа налево, а не “растворением” менялись?


Оставить комментарий