Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.12.2015, 23:16
Аспирант
Отправить личное сообщение для dima_riabets Посмотреть профиль Найти все сообщения от dima_riabets
 
Регистрация: 17.03.2014
Сообщений: 60

Добавить авто таймер переключения
Вот это переключатель вкладок:
<script src="http://demo.webcareer.ru/2015/02/tabs/js/jquery-1.11.1.min.js"></script>
<script>
		$(document).ready(function(){
			$('.tabs_menu a').click(function(e){
				e.preventDefault();
				$('.tabs_menu .active').removeClass('active');
				$(this).addClass('active');
				var tab = $(this).attr('href');
				$('.tab').not(tab).css({'display':'none'});
				$(tab).fadeIn(400);
			});
		});
		</script>


<div class="tabs_box">
			<ul class="tabs_menu">
				<li><a href="#tab1" class="active">Вкладка 1</a></li>
				<li><a href="#tab2">Вкладка 2</a></li>
				<li><a href="#tab3">Вкладка 3</a></li>
			</ul>
			<div class="tab" id="tab1">
				<p>Вкладка 1. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>

                <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию.</p>
			</div>
			<div class="tab" id="tab2">
				<p>Вкладка 2. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>

                <p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором.</p>		
			</div>
			<div class="tab" id="tab3">
				<p>Вкладка 3. Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения.</p>

				<p>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.</p>
			</div>
		</div>
    </body>
Ответить с цитированием
  #2 (permalink)  
Старый 07.12.2015, 00:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

dima_riabets,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

<style type="text/css">
  .active{
      background: #87CEEB
  }

  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>
 		$(function() {
		    var t = $('.tabs_box'),
		        a = $('.tabs_menu a');
		    a.click(function(e) {
		        e.preventDefault();
		        $('.tabs_menu a.active').removeClass('active');
		        $(this).addClass('active');
		        var tab = $(this).attr('href');
		        $('.tab').not($(tab).fadeIn(400)).css({
		            'display': 'none'
		        });
		    });
		    var timer;

		    function go() {
		        window.clearTimeout(timer);
		        var i = a.index($('.active')),
		            l = a.length;
		        i = ++i % l;
		        a.eq(i).click();
		        timer = window.setTimeout(go, 1500)
		    }
		    t.on({
		        mouseenter: function() {
		            window.clearTimeout(timer);
		        },
		        mouseleave: go
		    })

		    go()
		});
		</script>
 </head>

<body>

<div class="tabs_box">
			<ul class="tabs_menu">
				<li><a href="#tab1" class="active">Вкладка 1</a></li>
				<li><a href="#tab2">Вкладка 2</a></li>
				<li><a href="#tab3">Вкладка 3</a></li>
			</ul>
			<div class="tab" id="tab1">
				<p>Вкладка 1. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>

                <p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию.</p>
			</div>
			<div class="tab" id="tab2">
				<p>Вкладка 2. Многие думают, что Lorem Ipsum - взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, "consectetur", и занялся его поисками в классической латинской литературе.</p>

                <p>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором.</p>
			</div>
			<div class="tab" id="tab3">
				<p>Вкладка 3. Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам "lorem ipsum" сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения.</p>

				<p>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 "de Finibus Bonorum et Malorum" Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.</p>
			</div>
		</div>

</body>

</html>

Последний раз редактировалось рони, 07.04.2019 в 12:31.
Ответить с цитированием
  #3 (permalink)  
Старый 07.12.2015, 00:48
Аспирант
Отправить личное сообщение для dima_riabets Посмотреть профиль Найти все сообщения от dima_riabets
 
Регистрация: 17.03.2014
Сообщений: 60

Спасибо большое!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите чтобы таймер тикал Руслан904322 Общие вопросы Javascript 1 22.02.2015 12:43
как добавить в js слайдер авто прокрутку blackcky Общие вопросы Javascript 5 20.01.2015 09:04
Обновляемый таймер на javascript smillyhamster Общие вопросы Javascript 1 31.12.2013 10:30
Таймер для слайдера (jQuery) RamPi Events/DOM/Window 0 23.05.2011 14:52