06.02.2014, 04:27
|
|
Аспирант
|
|
Регистрация: 02.08.2013
Сообщений: 74
|
|
|
Что то не так выполняется в слайд-шоу.
Доброго Всем Времени Суток. Помогите, пожалуйста, разобраться в проблеме.
Сделал слайд-шоу. Самое обычное. Php вывело мне содержимое папки images в виде картинок и иконок "о", при нажатии на которое должен осуществляться переход к конкретному изображению
Песочница
<!Doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
#slideshow {
overflow: hidden;
}
#slideshow img {
position: absolute;
display: none;
top: -6px;
left: -6px;
}
#slideshow #play, #slideshow #pause, #slideshow #next, #slideshow #previous {
position: absolute;
z-index: 200;
}
#slideshow #play {
top: 8px;
left: 0;
text-align: right;
}
#slideshow #pause {
top: 8px;
right: 0;
text-align: left;
}
#slideshow #next {
right: 8px;
bottom: 5px;
}
#slideshow #previous {
left: 8px;
bottom: 5px;
}
#thumbs {
position: absolute;
z-index: 200;
text-align: center;
bottom: 8px;
left: 10%;
}
#thumbs span {
padding: 1px;
}
#slideshow {
width: 798px;
height: 448px;
}
#slideshow #play, #slideshow #pause {
width: 49.5%;
}
#thumbs {
width: 80%;
}
#slideshow {
border: 2px dashed #9add23;
}
#thumbs, #slideshow #play, #slideshow #pause, #slideshow #next, #slideshow #previous {
color: #c330c6;
}
.active {
color: #9add23;
}
</style>
<script>
function slideshow(){
if ($('#slideshow').length>0){
play_slideshow();
$('#slideshow #next').click(function(){ next_slide() });
$('#slideshow #previous').click(function(){ previous_slide() });
$('#slideshow #play').click(function(){ play_slideshow() });
$('#slideshow #pause').click(function(){ pause_slideshow(s_interval) });
$('#slideshow #thumbs span').click(function(){ switch_to_slide( $(this).attr('id') ) });
}
}
function next_slide(){
var images = $('#slideshow img').length;
id = get_id(images);
if (id+1 == images){ var next = 0 }
else { var next = id+1 }
$('#slideshow img#'+id).fadeOut(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+id).removeAttr('class');
$('#slideshow img#'+next).fadeIn(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+next).addClass('active');
}
function previous_slide(){
var images = $('#slideshow img').length;
id = get_id(images);
if (id==0){ var previous = images-1 }
else { var previous = id-1 }
$('#slideshow img#'+id).fadeOut(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+id).removeAttr('class');
$('#slideshow img#'+previous).fadeIn(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+previous).addClass('active');
}
function play_slideshow() {
setTimeout(next_slide, 1000);
return s_interval = setInterval(next_slide, 2200)
}
function pause_slideshow(s_interval) {
clearInterval(s_interval)
}
function get_id(images){
for(i=0;i<images;i++){
if($('#slideshow img#'+i).css('display')=='block'){ return i }
}
}
function switch_to_slide(next){
var images = $('#slideshow img').length;
$('#slideshow img#'+1).fadeOut(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+1).removeAttr('class');
$('#slideshow img#'+next).fadeIn(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+next).addClass('active');
}
$(document).ready(function() { slideshow() });
</script>
</head>
<body>
<div id="slideshow">
<span id="play">play</span><span id="pause">pause</span><span id="next">next</span><span id="previous">previous</span>
<img id="0" src="images/slide(1).jpg" width="800" height="450" style="display: block;">
<img id="1" src="images/slide(2).jpg" width="800" height="450" style="display: none;">
<img id="2" src="images/slide(3).jpg" width="800" height="450" style="display: none;">
<img id="3" src="images/slide(4).jpg" width="800" height="450" style="display: none;">
<img id="4" src="images/slide(5).jpg" width="800" height="450" style="display: none;">
<img id="5" src="images/slide(6).jpg" width="800" height="450" style="display: none;">
<img id="6" src="images/slide(7).jpg" width="800" height="450" style="display: none;">
<img id="7" src="images/slide(8).jpg" width="800" height="450" style="display: none;">
<img id="8" src="images/slide(9).jpg" width="800" height="450" style="display: none;">
<div id="thumbs">
<span id="0" class="active">o</span>
<span id="1" 0="">o</span>
<span id="2" 0="">o</span>
<span id="3" 0="">o</span>
<span id="4" 0="">o</span>
<span id="5" 0="">o</span>
<span id="6" 0="">o</span>
<span id="7" 0="">o</span>
<span id="8" 0="">o</span>
</div>
</div>
</body>
</html>
Но при нажатии на эту иконку "прыжка" к конкретному изображению, этой иконке как и должно определяется класс active, а также появляется нужная картинка и замирает на месте, но слайд-шоу не работает пока не дойдет оригинальное (начатое функцией play) действие до данного слайда. То есть слайд-шоу идет 0,1... я нажму 4 (4 иконка стала активной и 4 изображение появилось и замерло)... но слайд-шоу идет далее 2,3,4... (видно по меняющимся иконкам, картинка остается 4 все время)... и только тут начинается анимация после того как я нажал на 4...
Помогите, пожалуйста, разобраться в чем проблема(((
Последний раз редактировалось Synov_son, 06.02.2014 в 05:56.
Причина: Добавил ссылку на песочницу
|
|
06.02.2014, 23:45
|
|
Аспирант
|
|
Регистрация: 02.08.2013
Сообщений: 74
|
|
Решил проблему:
function switch_to_slide(next){
var images = $('#slideshow img').length;
var id = get_id(images);
$('#slideshow #thumbs span#'+next).addClass('active');
$('#slideshow img#'+next).fadeIn(1500, 'easeOutQuart');
$('#slideshow #thumbs span#'+id).removeAttr('class');
$('#slideshow img#'+id).fadeOut(1500, 'easeOutQuart', function(){ play_slideshow() });
}
|
|
09.02.2014, 03:22
|
|
Аспирант
|
|
Регистрация: 02.08.2013
Сообщений: 74
|
|
|
Работало, работало и перестало...как не понимаю...
|
|
09.02.2014, 06:41
|
 |
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
<style>
input {
float: left;
width:120px;
}
#result {
width: 240px;
height: 90px;
background-color: red;
color: #fff;
font-size: 80px;
text-align: center;
}
#buttons {
width:240px;
}
</style>
<div id="result"></div>
<div id="buttons">
<input type="button" value="Previous" id="prev">
<input type="button" value="Next" id="next">
<input type="button" value="Play" id="play">
<input type="button" value="Pause" id="pause">
</div>
<script>
//Обьект навигации. Вперед, назад и текущая позиция. Max кол-во элементов, первый элемент - 0
function nav(max) {
this.max = max;
this.current = this.current || -1;
this.next = function () {
this.current = this.current < this.max - 1 ? this.current + 1 : 0;
return this.current;
};
this.prev = function () {
this.current = this.current > 0 ? this.current - 1 : this.max - 1;
return this.current;
};
};
var animTimer, slider = new nav(8);
function sliderPlay() {
animTimer = setInterval(function () {
result.innerHTML = slider.next();
}, 1000);
};
window.onload = function () {
sliderPlay();
};
next.onclick = function () {
result.innerHTML = slider.next();
};
prev.onclick = function () {
result.innerHTML = slider.prev();
};
play.onclick = function () {
if (animTimer) return;
sliderPlay();
};
pause.onclick = function () {
clearInterval(animTimer);
animTimer = 0;
};
</script>
Маленький подсказка 
Последний раз редактировалось Vlasenko Fedor, 09.02.2014 в 06:54.
|
|
09.02.2014, 11:06
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Poznakomlus,
<style>
input {
float: left;
width:120px;
}
#result {
width: 240px;
height: 90px;
background-color: red;
color: #fff;
font-size: 80px;
text-align: center;
}
#buttons {
width:240px;
}
.set{
width: 20px;
height: 20px;
border-radius:50%;
float: none;
margin: 0px 3px;
}
.show{
background-color: rgb(0, 255, 0);
}
</style>
<div id="result"></div>
<div id="buttons">
<input type="button" value="Previous" id="prev">
<input type="button" value="Next" id="next">
<input type="button" value="Play" id="play">
<input type="button" value="Pause" id="pause">
</div>
<script>
for (var i=0; i<9; i++) {
var input = document.createElement("input");
input.type = "button";
input.className = "set";
input.onclick = function (a) {
return function () {
result.innerHTML = slider.set(a);
}
}(i);
buttons.appendChild(input);
}
var b = document.querySelectorAll('.set')
//Обьект навигации. Вперед, назад и текущая позиция. Max кол-во элементов, первый элемент - 0
function nav(max) {
this.old = null;
this.max = max;
this.current = -1;
this.next = function () {
this.current++;
return this.get();
};
this.prev = function () {
this.current--;
return this.get();
};
this.get = function () {this.current > this.max && (this.current = 0);
this.current < 0 && (this.current = this.max);
this.old && (this.old.className = this.old.className.replace(' show', ''));
this.old = b[this.current];
this.old && (this.old.className = this.old.className + ' show');
return this.current
};
this.set = function (a) {this.current = a;
return this.get()
};
};
var animTimer, slider = new nav(8);
result.innerHTML = slider.set(0);
function sliderPlay() {
animTimer = setInterval(function () {
result.innerHTML = slider.next();
}, 1000);
};
window.onload = function () {
sliderPlay();
};
next.onclick = function () {
result.innerHTML = slider.next();
};
prev.onclick = function () {
result.innerHTML = slider.prev();
};
play.onclick = function () {
if (animTimer) return;
sliderPlay();
};
pause.onclick = function () {
clearInterval(animTimer);
animTimer = 0;
};
</script>
Последний раз редактировалось рони, 09.02.2014 в 11:43.
|
|
09.02.2014, 13:52
|
|
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
<style>
input {
float: left;
width:120px;
}
#result {
width: 240px;
height: 70px;
background-color: red;
color: #fff;
font-size: 60px;
text-align: center;
}
#buttons, #panel {
width:240px;
}
.set {
width: 20px;
height: 20px;
border-radius:50%;
float: none;
margin: 5px;
}
.active {
background-color: rgb(0, 255, 0);
}
</style>
<div id="result"></div>
<div id="buttons">
<input type="button" value="Previous" id="prev">
<input type="button" value="Next" id="next">
<input type="button" value="Play" id="play">
<input type="button" value="Pause" id="pause">
</div>
<div id="panel"></div>
<script>
function nav(max) {
this.max = max;
this.current = this.current || -1;
this.next = function () {
this.current = this.current < this.max - 1 ? this.current + 1 : 0;
return this.current;
};
this.prev = function () {
this.current = this.current > 0 ? this.current - 1 : this.max - 1;
return this.current;
};
};
var animTimer, slider = new nav(8);
function sliderPlay() {
animTimer = setInterval(function () {
step('next');
}, 1000);
};
function slActive(n){
panel.children[slider.current].className = "set";
panel.children[n].className += " active";
result.innerHTML = n;
slider.current = n;
}
function step(poz){
panel.children[slider.current].className = "set";
result.innerHTML = slider[poz]();
panel.children[slider.current].className += " active";
}
window.onload = function () {
for (var i = 0, insHtml =""; i < slider.max; i++){
insHtml +='<input type="button" class="set" onclick="slActive('+i+')">';
}
panel.innerHTML = insHtml;
panel.children[0].className += " active";
result.innerHTML = 0;
slider.current = 0
sliderPlay();
};
next.onclick = function () {
step('next');
};
prev.onclick = function () {
step('prev');
};
play.onclick = function () {
if (animTimer) return;
sliderPlay();
};
pause.onclick = function () {
clearInterval(animTimer);
animTimer = 0;
};
</script>
рони, nav - хороший объект был 
да, а код все растет
Последний раз редактировалось Vlasenko Fedor, 09.02.2014 в 18:21.
|
|
11.02.2014, 03:30
|
|
Аспирант
|
|
Регистрация: 02.08.2013
Сообщений: 74
|
|
|
Ребята, большое Вам спасибо. А реально совместить объекты DOM и jquery ? А то я первый раз увидел в ваших примерах их...и ваши примеры без анимации и тупо копировать не хочу. Но я взял их себе на заметку. Скажите а в моем коде есть проблема в конкретном месте или оно просто плохо ? Если есть проблема, не подскажите, пожалуйста, где ?
|
|
11.02.2014, 04:21
|
|
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
Synov_son,
разберитесь в данном объекте. Его я использовал как ядро слайдера. Заключив всю логику в нем. Вот простой пример
var nav = function(max){
this.max = max;
this.current = this.current || -1;
this.next = function () {
this.current = this.current < this.max - 1
? this.current + 1
: 0;
return this.current;
};
this.prev = function () {
this.current = this.current > 0
? this.current - 1
: this.max - 1;
return this.current;
};
};
// пользуемся
var slider = new nav(3); //создали объект 3 кол-во элементов 0 и 1, и 2
alert(slider.next()); //вперед
alert(slider.next());
alert(slider.next());
alert(slider.prev()); //назад
alert(slider.current); //текущая позиция
slider.current = 2; //можно и задать или инициализировать с нужного элемента
а переписать и добавить эффектов вам разобравшись не составит труда
Последний раз редактировалось Vlasenko Fedor, 11.02.2014 в 04:33.
|
|
11.02.2014, 04:33
|
|
Аспирант
|
|
Регистрация: 02.08.2013
Сообщений: 74
|
|
|
Да, это я понимаю, только вот проблема у меня именно с переключателями на конкретный слайд...
|
|
11.02.2014, 04:40
|
|
Аспирант
|
|
Регистрация: 02.08.2013
Сообщений: 74
|
|
var nav = function(max){
this.max = max;
this.current = this.current || -1;
this.next = function(){
this.current = this.current < this.max - 1 ? this.current + 1 : 0;
this.slide(this.current)
};
this.prev = function(){
this.current = this.current > 0 ? this.current - 1 : this.max - 1;
this.slide(this.current)
};
this.slide = function(current){
$('#slideshow img').fadeOut(1500, 'easeOutQuart');
$('#slideshow #thumbs span').removeClass('active');
$('#slideshow #thumbs span#'+current).addClass('active');
$('#slideshow img#'+current).fadeIn(1500, 'easeOutQuart');
}
};
var slider = new nav($('#slideshow img').length);
slider.next()
Вот так вроде и должно, но только первый блок выцветает |
|
|
|
