Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.11.2019, 16:48
Новичок на форуме
Отправить личное сообщение для EvanBrown Посмотреть профиль Найти все сообщения от EvanBrown
 
Регистрация: 05.11.2019
Сообщений: 8

Проблема с анимированием карусели рандомных картинок
Здравствуйте, господа и дамы. Возникла проблема: при воспроизведении при нажатии на кнопку анимация подтормаживает (а именно прыгает к первой картинке и визуально начинает прокрутку с первой картинки). Также, чаще всего рандом выбирает только 1 картинку, некоторые и вовсе не выбирает (проверено в районе 100 кручений)
Буду очень рад Вашей помощи)

Вот собственно сам код:
<head>
...

<script>
 jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	}
$(function() {
    var option = {
        speed: 2,
        duration: 3,
        stopImageNumber: 4
    };

 $("#go").click(function() {
 $('#go').prop('disabled', true);
    option.stopImageNumber = Math.random() * 11|0;
    $(".roulette-inner img").removeClass("active");
    $("#config").text(JSON.stringify(option));
    $({
        left: 0
    }).animate({
        left: 844 * option.speed + 7 * (option.stopImageNumber + 6)
    }, {
        duration: option.duration * 1000,
        easing: "easeOutCirc",
        step: function(a) {
            $(".roulette-inner").css("transform", "translateX(-" + a % 844 + "px)");
        },
        complete: function() {
            $(".roulette-inner img").eq(option.stopImageNumber + (option.stopImageNumber < 6) * 11).addClass("active");
			$('#go').prop('disabled', false);
        }
    });
  })
});
  </script>
</head>
<body>


<div class="roulette" style="overflow: hidden; height: 300px; width: 1000px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 10000px;">
<img src="images/1.png" style="display: block; float: left;">
<img src="images/2.png" style="display: block; float: left;">
<img src="images/3.png" style="display: block; float: left;">
<img src="images/4.png" style="display: block; float: left;">
<img src="images/5.png" style="display: block; float: left;">
<img src="images/6.png" style="display: block; float: left;">
<img src="images/7.png" style="display: block; float: left;">
<img src="images/8.png" style="display: block; float: left;">
<img src="images/9.png" style="display: block; float: left;">
</div>
</div>
</br>
<div class=button style="position: relative; height: 150px; wigth: 1000px;">
<button id="go" onclick="play()" class="btn btn-primary py-3 px-4">Lets Start</button>
</div>

...
</body>

Последний раз редактировалось EvanBrown, 05.11.2019 в 16:52.
Ответить с цитированием
  #2 (permalink)  
Старый 05.11.2019, 17:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,215

Сообщение от EvanBrown
. Также, чаще всего рандом выбирает только 1 картинку, некоторые и вовсе не выбирает (проверено в районе 100 кручений)
строка 17
option.stopImageNumber = Math.random() * $(".roulette-inner img").length|0;


строка 31
$(".roulette-inner img").eq(option.stopImageNumber).addClass("active");
Ответить с цитированием
  #3 (permalink)  
Старый 05.11.2019, 19:20
Новичок на форуме
Отправить личное сообщение для EvanBrown Посмотреть профиль Найти все сообщения от EvanBrown
 
Регистрация: 05.11.2019
Сообщений: 8

Сообщение от рони Посмотреть сообщение
строка 17
option.stopImageNumber = Math.random() * $(".roulette-inner img").length|0;


строка 31
$(".roulette-inner img").eq(option.stopImageNumber).addClass("active");
Можно чуть подробнее, если не сложно
Ответить с цитированием
  #4 (permalink)  
Старый 05.11.2019, 19:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,215

EvanBrown,
заменить строки на предложенный код.
Ответить с цитированием
  #5 (permalink)  
Старый 05.11.2019, 19:51
Новичок на форуме
Отправить личное сообщение для EvanBrown Посмотреть профиль Найти все сообщения от EvanBrown
 
Регистрация: 05.11.2019
Сообщений: 8

К сожалению, не помогло(
Ответить с цитированием
  #6 (permalink)  
Старый 05.11.2019, 20:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,215

EvanBrown,
выпадает одно и тоже?
Ответить с цитированием
  #7 (permalink)  
Старый 05.11.2019, 20:14
Новичок на форуме
Отправить личное сообщение для EvanBrown Посмотреть профиль Найти все сообщения от EvanBrown
 
Регистрация: 05.11.2019
Сообщений: 8

Сообщение от рони Посмотреть сообщение
EvanBrown,
выпадает одно и тоже?
Да
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2019, 20:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,215

EvanBrown,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .roulette-inner img.active{
       border: 5px solid #FF00FF;
       border-radius: 3px;
   }
   .roulette-inner{
       display: flex;
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
 jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
    }
$(function() {
    var option = {
        speed: 2,
        duration: 3,
        stopImageNumber: 0
    };

 $("#go").click(function() {
 var len = $(".roulette-inner img").length;
 var width = $(".roulette-inner img:first").width();
 var widthTotall = len * width;
 $('#go').prop('disabled', true);
    option.stopImageNumber = Math.random() * len|0;
    $(".roulette-inner img").removeClass("active");
    $("#config").text(JSON.stringify(option));
    $({
        left: 0
    }).animate({
        left: widthTotall * option.speed
    }, {
        duration: option.duration * 1000,
        easing: "easeOutCirc",
        step: function(a) {
            $(".roulette-inner").css("transform", "translateX(-" + (a % widthTotall)+ "px)");
        },
        complete: function() {
            $(".roulette-inner img").eq(option.stopImageNumber).addClass("active");
            $('#go').prop('disabled', false);
        }
    });
  })
});
  </script>
</head>
<body>


<div class="roulette" style="overflow: hidden; height: 300px; width: 1000px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 10000px;">
    <img src="https://picsum.photos/100/100?1">
	<img src="https://picsum.photos/100/100?2">
	<img src="https://picsum.photos/100/100?3">
	<img src="https://picsum.photos/100/100?4">
	<img src="https://picsum.photos/100/100?5">
	<img src="https://picsum.photos/100/100?6">
	<img src="https://picsum.photos/100/100?7">
	<img src="https://picsum.photos/100/100?8">
	<img src="https://picsum.photos/100/100?9">

</div>
</div>
</br>
<div class=button style="position: relative; height: 150px; wigth: 1000px;">
<button id="go" class="btn btn-primary py-3 px-4">Lets Start</button>
</div>
<div id="config"></div>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 05.11.2019, 20:51
Новичок на форуме
Отправить личное сообщение для EvanBrown Посмотреть профиль Найти все сообщения от EvanBrown
 
Регистрация: 05.11.2019
Сообщений: 8

У меня немножко другая система. Мне надо, чтобы рандомная картинка остановилась в центре

Последний раз редактировалось EvanBrown, 05.11.2019 в 22:15.
Ответить с цитированием
  #10 (permalink)  
Старый 05.11.2019, 22:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,215

рулетка горизонтальная
Сообщение от EvanBrown
Мне надо, чтобы рандомная картинка остановилась в центре
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style type="text/css">body{
   position:relative;
 }

 .roulette-inner img{
   width:72px;
   height:72px;
   margin:2px;
   display: block;
   float: left;


 }

 .roulette-inner img.active{
   border:2px solid rgba(89,0,153,.2);
   box-sizing:border-box;
   border-radius:50%;
   padding:-4px 4px 2px 4px;
   transform:scale(1.7);
   z-index:1000;
   background-color:rgba(0,255,127,.5);
 }

 .roulette {
  overflow: hidden; height: 126px; width: 532px;
 }

  .roulette-inner {
    position: relative; top: 24px; width: 17000px;
  }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
 jQuery.easing['easeInOutQuart'] = function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    }
$(function() {
var k = 45, n = 7, w = 76;  //количество картинок , сколько показывать , ширина картинки
for (var i=0; i<k; i++)  {
$("<img>", {src : "https://dummyimage.com/72x72/d1e02d/03040d.jpg&text="+i}).appendTo(".roulette-inner")

}
for (var i=0; i<k; i++)  {
$("<img>", {src : "https://dummyimage.com/72x72/d1e02d/03040d.jpg&text="+i}).appendTo(".roulette-inner")

}
$(".roulette").width(n * w) ;
$(".roulette-inner").width(2 * k * w + w)

    var option = {
        speed: 5,
        duration: 3,
        stopImageNumber: 0
    };
 var old = 0;
 $("#go").click(function() {
    option.stopImageNumber = Math.random() * k|0;
    $(".roulette-inner  img").removeClass("active");
    $("#config").text(JSON.stringify(option));
    $({
        left: old * w
    }).animate({
        left: (k * w) * option.speed + w * (option.stopImageNumber + (k - Math.floor(n/2)))
    }, {
        duration: option.duration * 1000,
        easing: "easeInOutQuart",
        step: function(a) {
            $(".roulette-inner").css("transform", "translateX(-" + a % (k * w) + "px)");
        },
        complete: function() {
            old = option.stopImageNumber + (option.stopImageNumber < Math.floor(n/2)) * k
            $(".roulette-inner  img").eq(old).addClass("active");
            old = option.stopImageNumber + (k - Math.floor(n/2))
        }
    });
  })
});
  </script>
</head>

<body>
<h2>Config: <span id="config"></span></h2>
<div class="roulette">
<div class="roulette-inner">
</div>
</div>
<button id="go">Go</button>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное пролистывание картинок слайдера Corazon Элементы интерфейса 3 30.01.2017 22:07
Смена картинок на JS. Помогите реализовать! Aggao Элементы интерфейса 3 27.11.2014 23:32
Проблема с позицией картинок Solovei95 Общие вопросы Javascript 3 30.01.2012 13:47
Проблема скрипта карусели в firefox. Очень прошу помощи. -user21- jQuery 5 16.06.2010 13:38
Проблема с прелоадом картинок (слайд-шоу) InviS jQuery 6 21.02.2010 18:32