Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.02.2014, 04:27
Аспирант
Отправить личное сообщение для Synov_son Посмотреть профиль Найти все сообщения от Synov_son
 
Регистрация: 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. Причина: Добавил ссылку на песочницу
Ответить с цитированием
  #2 (permalink)  
Старый 06.02.2014, 23:45
Аспирант
Отправить личное сообщение для Synov_son Посмотреть профиль Найти все сообщения от Synov_son
 
Регистрация: 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() });
}
Ответить с цитированием
  #3 (permalink)  
Старый 09.02.2014, 03:22
Аспирант
Отправить личное сообщение для Synov_son Посмотреть профиль Найти все сообщения от Synov_son
 
Регистрация: 02.08.2013
Сообщений: 74

Работало, работало и перестало...как не понимаю...
Ответить с цитированием
  #4 (permalink)  
Старый 09.02.2014, 06:41
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 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.
Ответить с цитированием
  #5 (permalink)  
Старый 09.02.2014, 11:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,117

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.
Ответить с цитированием
  #6 (permalink)  
Старый 09.02.2014, 13:52
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 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.
Ответить с цитированием
  #7 (permalink)  
Старый 11.02.2014, 03:30
Аспирант
Отправить личное сообщение для Synov_son Посмотреть профиль Найти все сообщения от Synov_son
 
Регистрация: 02.08.2013
Сообщений: 74

Ребята, большое Вам спасибо. А реально совместить объекты DOM и jquery ? А то я первый раз увидел в ваших примерах их...и ваши примеры без анимации и тупо копировать не хочу. Но я взял их себе на заметку. Скажите а в моем коде есть проблема в конкретном месте или оно просто плохо ? Если есть проблема, не подскажите, пожалуйста, где ?
Ответить с цитированием
  #8 (permalink)  
Старый 11.02.2014, 04:21
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 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.
Ответить с цитированием
  #9 (permalink)  
Старый 11.02.2014, 04:33
Аспирант
Отправить личное сообщение для Synov_son Посмотреть профиль Найти все сообщения от Synov_son
 
Регистрация: 02.08.2013
Сообщений: 74

Да, это я понимаю, только вот проблема у меня именно с переключателями на конкретный слайд...
Ответить с цитированием
  #10 (permalink)  
Старый 11.02.2014, 04:40
Аспирант
Отправить личное сообщение для Synov_son Посмотреть профиль Найти все сообщения от Synov_son
 
Регистрация: 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()

Вот так вроде и должно, но только первый блок выцветает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 12:56
как получить тот кусок текста который сейчас видно на экране ? mitiya Общие вопросы Javascript 27 21.03.2013 12:21
Кто как учит/учил/ будет учить Английский ? DjDiablo Оффтопик 53 18.12.2012 21:01
Мой собственный башорг в скайпе))) devote Оффтопик 81 03.10.2012 00:56
Что не так в этом скрипте? Demidovstan Работа 1 13.05.2009 13:08