Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Что то не так выполняется в слайд-шоу. (https://javascript.ru/forum/jquery/44904-chto-ne-tak-vypolnyaetsya-v-slajjd-shou.html)

Synov_son 06.02.2014 04:27
Что то не так выполняется в слайд-шоу.
 
Доброго Всем Времени Суток. Помогите, пожалуйста, разобраться в проблеме.
Сделал слайд-шоу. Самое обычное. 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 23:45
Решил проблему:
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() });
}

Synov_son 09.02.2014 03:22
Работало, работало и перестало...как не понимаю...

Vlasenko Fedor 09.02.2014 06:41 
<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>

Маленький подсказка :yes:

рони 09.02.2014 11:06
Poznakomlus,
:dance: 
<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>

Vlasenko Fedor 09.02.2014 13:52 
<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 - хороший объект был:nono:
да, а код все растет

Synov_son 11.02.2014 03:30
Ребята, большое Вам спасибо. А реально совместить объекты DOM и jquery ? А то я первый раз увидел в ваших примерах их...и ваши примеры без анимации и тупо копировать не хочу. Но я взял их себе на заметку. Скажите а в моем коде есть проблема в конкретном месте или оно просто плохо ? Если есть проблема, не подскажите, пожалуйста, где ?

Vlasenko Fedor 11.02.2014 04:21
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; //можно и задать или инициализировать с нужного элемента

а переписать и добавить эффектов вам разобравшись не составит труда

Synov_son 11.02.2014 04:33
Да, это я понимаю, только вот проблема у меня именно с переключателями на конкретный слайд...

Synov_son 11.02.2014 04:40 
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()

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


Часовой пояс GMT +3, время: 23:12.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице