|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
26.09.2017, 19:41 | #1 |
Форумчанин
Регистрация: 28.09.2010
Сообщений: 246
|
Автозапуск прокрутки картинок
Есть слайдер картинок. при нажатии на кнопку "Play" картинки начинают прокручиваться. Интересует вопрос: Как сделать чтобы картинки прокручивались автоматически без нажатия на кнопку "Play".
Вот код скрипта: jQuery(document).ready(function(){ function htmSlider(){ /* Зададим следующие переменные */ /* обертка слайдера */ var slideWrap = jQuery('.slide-wrap'); /* ссылки на предудыщий иследующий слайд */ var nextLink = jQuery('.next-slide'); var prevLink = jQuery('.prev-slide'); var playLink = jQuery('.auto'); var is_animate = false; /* ширина слайда с отступами */ var slideWidth = jQuery('.slide-item').outerWidth(); /* смещение слайдера */ var newLeftPos = slideWrap.position().left - slideWidth; /* Клик по ссылке на следующий слайд */ nextLink.click(function(){ if(!slideWrap.is(':animated')) { slideWrap.animate({left: newLeftPos}, 500, function(){ slideWrap .find('.slide-item:first') .appendTo(slideWrap) .parent() .css({'left': 0}); }); } }); /* Клик по ссылке на предыдующий слайд */ prevLink.click(function(){ if(!slideWrap.is(':animated')) { slideWrap .css({'left': newLeftPos}) .find('.slide-item:last') .prependTo(slideWrap) .parent() .animate({left: 0}, 500); } }); /* Функция автоматической прокрутки слайдера */ function autoplay(){ if(!is_animate){ is_animate = true; slideWrap.animate({left: newLeftPos}, 5000, function(){ slideWrap .find('.slide-item:first') .appendTo(slideWrap) .parent() .css({'left': 0}); is_animate = false; }); } } /* Клики по ссылкам старт/пауза */ playLink.click(function(){ if(playLink.hasClass('play')){ playLink.removeClass('play').addCla ss('pause'); jQuery('.navy').addClass('disable') ; timer = setInterval(autoplay, 1000); } else { playLink.removeClass('pause').addCl ass('play'); jQuery('.navy').removeClass('disabl e'); clearInterval(timer); } }); } /* иницилизируем функцию слайдера */ htmSlider(); }); Это код файла html <!Doctype HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" type="text/css" href="slider.css" media="all"> </head> <body> <div id="main"> <div class="slider"> <div class="slide-list"> <div class="slide-wrap"> <div class="slide-item"> <img width="280" height="187" src="img/img-1.jpg" alt="" /> <span class="slide-title">Первый слайд</span> </div> <div class="slide-item"> <img width="280" height="187" src="img/img-2.jpg" alt="" /> <span class="slide-title">Ну просто очень длинное название второго слайда</span> </div> <div class="slide-item"> <img width="280" height="187" src="img/img-3.jpg" alt="" /> <span class="slide-title">Третий слайд</span> </div> <div class="slide-item"> <img width="280" height="187" src="img/img-4.jpg" alt="" /> <span class="slide-title">Четвертый слайд</span> </div> <div class="slide-item"> <img width="280" height="187" src="img/img-5.jpg" alt="" /> <span class="slide-title">Пятый слайд</span> </div> </div> <div class="clear"></div> </div> <div class="navy prev-slide"></div> <div class="navy next-slide"></div> <div class="auto play"></div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="slider.js"></script> </body> </html> А это CSS /* = Общие стили HTM */ body { padding: 0 0 50em 0; margin: 0; font: 14px/1.8 Helvetica; color: #444; background-color: #dbdbdb; } a {text-decoration: none;} header { display: block; position: relative; margin: 0; background: #f9f9f9; } .back { font:normal 3em 'Agency FB'; color: #0074A3; position:absolute; top: 10px; right: 10%;} .back:hover {text-decoration: underline;} h1 {margin: 0 0 0 2em;} h1 a { display: inline-block; font: normal 3em 'Agency FB'; text-decoration: none; } .how { color: #990000; } .to { color: #0074A3; } .make { color: #006600; } .demo { font: normal 2em 'Agency FB';} /* main */ #main { width: 94%; padding: 1% 3%; } #main h1 { text-align: center; font: 2em Helvetica; margin: 20px 0 10px 0; padding-bottom: 15px; border-bottom: 2px solid #444444; } /* Задаем сброс обтекания */ .clear { margin-top: -1px; height: 1px; clear:both; zoom: 1; } /* Slider */ .slider { /* Ширина контейнера */ width: 900px; /* Внешние тступы сверху и снизу */ margin: 50px auto; /* Внутренние отступы для ссылок navy */ padding: 0 30px; /* Позиционирование */ position: relative; /* Скроем то что выходит за границы */ overflow: hidden; } /* Двойной клик по ссылкам вперед/назад вызывает выделение всех элементов слайдера, поэтому предотвращаем это */ .slider::-moz-selection { background: transparent; color: #fff; text-shadow: none; } .slider::selection { background: transparent; color: #fff; text-shadow: none; } .slide-list { position: relative; margin: 0; padding: 0; } .slide-wrap { position: relative; left: 0px; top: 0; /* максимально возможная ширина обертки слайдера */ width: 10000000px; } .slide-item { /* Ширина слайда */ width: 280px; /* Внутренние отступы */ padding: 10px; /* Обтекание */ float: left; } .slide-title { /* Шрифт */ font: bold 16px monospace; /* Указываем, что элемент блочный */ display: block; } /* навигация вперед/назад */ .navy { /* абсолютное позиционирование */ position: absolute; top: 0; z-index: 1; height: 100%; /* ширина ссылок */ width: 30px; cursor: pointer; } .prev-slide { left: 0; background: #dbdbdb url(bg/left-arrow.png) 11px 40% no-repeat; } .next-slide { right: 0; background: #dbdbdb url(bg/right-arrow.png) 13px 40% no-repeat; } .navy.disable { background: #dbdbdb; } /* навигация старт/пауза */ .auto { width: 7px; height: 11px; cursor: pointer; margin: 10px auto; } .play { background: url(bg/play.png) center no-repeat; } .pause { background: url(bg/pause.png) center no-repeat; } Буду очень благодарен за помощь.[/B]
Смотреть фильмы HD Фильмы для планшетов
|
26.09.2017, 20:24 | #2 |
Старожил
Регистрация: 25.02.2007
Сообщений: 4,158
|
1) Вот зачем столько воды было размещать?
2) Код оформляйте в специальных тегах 3) ПеременнаЯ var is_animate = false; какбэ подсказывает - "сделай меня true - и будет счастье" |
27.09.2017, 00:18 | #3 |
Старожил
Регистрация: 09.01.2008
Сообщений: 26,229
|
если не заморачиваться с тем, как можно остановить (для этого в исходном коде служит та же кнопка, что и запускает слайды), тогда я бы попробовал так:
Код:
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Автозапуск приложения. Но вопрос совсем не про автозапуск приложения. | avd | Общие вопросы Delphi | 4 | 30.08.2012 22:24 |
Полосы прокрутки | ВалекFCRK | Общие вопросы Delphi | 1 | 08.06.2011 22:17 |
Полоса прокрутки | Gamst | HTML и CSS | 2 | 06.06.2010 20:24 |
Полосы прокрутки | GlaziRock | Общие вопросы .NET | 0 | 10.12.2009 17:46 |
полосы прокрутки | daron | HTML и CSS | 3 | 06.05.2009 13:53 |