Автозапуск прокрутки картинок - JavaScript, Ajax

demiancz · 26.09.2017, 19:41

Есть слайдер картинок. при нажатии на кнопку "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]

ADSoft · 26.09.2017, 20:24

1) Вот зачем столько воды было размещать?
2) Код оформляйте в специальных тегах
3) ПеременнаЯ var is_animate = false; какбэ подсказывает - "сделай меня true - и будет счастье"

Serge_Bliznykov · 27.09.2017, 00:18

если не заморачиваться с тем, как можно остановить (для этого в исходном коде служит та же кнопка, что и запускает слайды), тогда я бы попробовал так:

Код:

/* иницилизируем функцию слайдера */
 htmSlider();
 /* запускаем процесс проигрывания слайдов */
 timer = setInterval(autoplay, 1000);
 });

26.09.2017, 19:41	#1
demiancz Форумчанин Регистрация: 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
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,156	1) Вот зачем столько воды было размещать? 2) Код оформляйте в специальных тегах 3) ПеременнаЯ var is_animate = false; какбэ подсказывает - "сделай меня true - и будет счастье" Сайты, приложения, автоматизация в широком смысле слова

27.09.2017, 00:18	#3
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	если не заморачиваться с тем, как можно остановить (для этого в исходном коде служит та же кнопка, что и запускает слайды), тогда я бы попробовал так: Код: `/* иницилизируем функцию слайдера / htmSlider(); / запускаем процесс проигрывания слайдов */ timer = setInterval(autoplay, 1000); });`

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Автозапуск приложения. Но вопрос совсем не про автозапуск приложения.	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