Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.09.2018, 18:15
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Некорректная работа слайдшоу
Доброго времени суток) Решил попрактиковаться с js нашел интересный слайдер решил повторить. Вроде как все вышло, но при первом переходе между классами происходит резко дальше заменяется все как надо. Думал что проблема в последовательности команд пробовал всякие вариации менял местами и ничего. Объясните в чем проблема и как ее решить за ранее благодарен)
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
        <style>



/* sleider3---------------------------------- */

#slide3{
width:400px;
height:400px;
margin:auto;


}


#img1{
	margin:auto;
	background-color:#7E6497;
	width:400px;
	height:400px;
	position:absolute;
	
}

#img2{
	margin:auto;
	background-color:#D0FF00;
	width:400px;
	height:400px;
	position:absolute;
	
}

#img3{
	margin:auto;
	background-color:#00C8FF;
	width:400px;
	height:400px;
	position:absolute;


}


#img4{
	margin:auto;
	background-color:red;
	width:400px;
	height:400px;
	position:absolute;
	
	
}


.of{
	display: none;
}
.active{
	display: block !important;
	
}




  </style>
       
    </head>
    <body>
 		
 		<div id='an3'><header id="slide3">
 			<div id=slider>
 				<div id="img1" class="of active"></div>
				<div id="img2" class="of"></div>
				<div id="img3" class="of"></div>
				<div id="img4" class="of"></div>
 			</div>

 			<div id="levo1"></div>
 			<div id="pravo1"></div>
 		</header></div>
		
		</fieldset>
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
     <script>
     	
 	$(function(){

	
	var timer = setTimeout(function test(){
	var active = $('.active');
	var ImgIndex = $('.active').index();
	var NextImgIndex =  ImgIndex + 1;
	var NextImg = $(' #slider > .of').eq(NextImgIndex);
	active.fadeOut(1500);
	active.removeClass('active');
	if( NextImgIndex === ($('#slider > .of:last').index()+1)){
			$(' #slider > .of').eq(0).fadeIn(1500);
			$(' #slider > .of').eq(0).addClass('active');  
	}
		else{
	NextImg.fadeIn(1500);
	NextImg.addClass('active');
}

				setTimeout(test, 5000);
		
		},5000)


 
 })
     </script>
    </body>
</html>

Последний раз редактировалось oleg901, 20.09.2018 в 18:35.
Ответить с цитированием
  #2 (permalink)  
Старый 20.09.2018, 18:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

oleg901,
в jQuery setTimeout для таких слайдеров не нужен
Ответить с цитированием
  #3 (permalink)  
Старый 20.09.2018, 19:12
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Объясните пожалуйста как решить эту маленькую ошибку. До этого скрипт обрабатывался кликом и проблема была такая же. Все равно первый раз смена цветов резче чем во все остальные. Если не использовать setTimeout тогда какая альтернатива?
Ответить с цитированием
  #4 (permalink)  
Старый 20.09.2018, 19:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

бесконечная карусель jQuery
oleg901,
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
        <style>



/* sleider3---------------------------------- */

#slide3{
width:400px;
height:400px;
margin:auto;


}


#img1{
    margin:auto;
    background-color:#7E6497;
    width:400px;
    height:400px;
    position:absolute;

}

#img2{
    margin:auto;
    background-color:#D0FF00;
    width:400px;
    height:400px;
    position:absolute;

}

#img3{
    margin:auto;
    background-color:#00C8FF;
    width:400px;
    height:400px;
    position:absolute;


}


#img4{
    margin:auto;
    background-color:red;
    width:400px;
    height:400px;
    position:absolute;
}



.of{
    font-size: 70px;
    line-height: 400px;
    text-align: center;
    display:  none;
}


  </style>

    </head>
    <body>

 		<div id='an3'><header id="slide3">
 			<div id=slider>
 				<div id="img1" class="of">1</div>
                <div id="img2" class="of">2</div>
                <div id="img3" class="of">3</div>
                <div id="img4" class="of">4</div>
 			</div>

 			<div id="levo1"></div>
 			<div id="pravo1"></div>
 		</header></div>


 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
     <script>
$(function() {
    var Img = $(".of"),
        ImgLength = Img.length,
        ImgIndex = 0,
        pause = 5000,
        duration = 1500;
    Img.eq(ImgIndex).fadeIn(duration, show);

    function show() {
        Img.delay(pause).eq(ImgIndex).fadeOut(duration, show);
        ImgIndex++;
        ImgIndex %= ImgLength;
        Img.eq(ImgIndex).fadeIn(duration)
    }
});
     </script>
    </body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 20.09.2018, 20:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

бесконечная карусель js
oleg901,
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
        <style>



/* sleider3---------------------------------- */

#slide3{
width:400px;
height:400px;
margin:auto;
 position: relative;

}


#img1{
    margin:auto;
    background-color:#7E6497;
    width:400px;
    height:400px;
    position:absolute;

}

#img2{
    margin:auto;
    background-color:#D0FF00;
    width:400px;
    height:400px;
    position:absolute;

}

#img3{
    margin:auto;
    background-color:#00C8FF;
    width:400px;
    height:400px;
    position:absolute;


}


#img4{
    margin:auto;
    background-color:red;
    width:400px;
    height:400px;
    position:absolute;
}



.of{
    font-size: 70px;
    line-height: 400px;
    text-align: center;
     opacity: 0;
     z-index: 0;
     transform: scale(0);
     transition: 1.5s;
}
.active{
    transition: 1s;
    opacity: 1;
    z-index: 100;
    transform: scale(1);
}

  </style>

    </head>
    <body>

 		<div id='an3'><header id="slide3">
 			<div id=slider>
 				<div id="img1" class="of">1</div>
                <div id="img2" class="of">2</div>
                <div id="img3" class="of">3</div>
                <div id="img4" class="of">4</div>
 			</div>

 			<div id="levo1"></div>
 			<div id="pravo1"></div>
 		</header></div>



     <script>
 document.addEventListener('DOMContentLoaded', function() {
      var Img = document.querySelectorAll(".of"),
        ImgLength = Img.length,
        ImgIndex = ImgLength - 1,
        pause = 5000;
        function show() {
        Img[ImgIndex].classList.remove("active");
        ImgIndex++;
        ImgIndex %= ImgLength;
        Img[ImgIndex].classList.add("active");
        window.setTimeout(show, pause);
        };
        show()
  });
    </script>
    </body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 21.09.2018, 11:51
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Спасибо, я понял свою ошибку. Посоветуете какой-нибудь задачник по JavaScript. Книгу я уже нашел на форуме. А вот что касается практики может знаете что-то подобное?
Ответить с цитированием
  #7 (permalink)  
Старый 21.09.2018, 12:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от oleg901
Посоветуете какой-нибудь задачник
на форуме ежедневно новые задачи.
http://code.mu/tasks/javascript/base...novichkov.html
практика - сделайте сайт от и до самостоятельно.
Ответить с цитированием
  #8 (permalink)  
Старый 21.09.2018, 12:34
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Спасибо
Ответить с цитированием
  #9 (permalink)  
Старый 21.09.2018, 20:17
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Рони, еще один вопрос захотел сделать так что бы слайдер реагировал не только на событие клик, а и на таймер. Ну что бы цвета менялись на автомате. И получилось у меня это криво. Как реализовать данную задачу?
Ответить с цитированием
  #10 (permalink)  
Старый 21.09.2018, 20:26
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Тема закрыта нашел ответ
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Gulp / browser-sync некорректная работа вочера Black_Star Сборка проекта, утилиты 0 16.04.2017 15:45
Некорректная работа Gulp-uglify Sigizmund2012 Сборка проекта, утилиты 1 08.09.2015 18:39
Некорректная работа get(set)Attribute в IE для элементов img back to back Internet Explorer 15 09.06.2012 16:52
Некорректная работа ф-ции Dimonya Events/DOM/Window 7 15.04.2010 14:12
Некорректная работа lightwindow в ie6,7,8 nastya Internet Explorer 1 20.11.2009 07:52