Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проблема с анимированием карусели рандомных картинок (https://javascript.ru/forum/misc/78791-problema-s-animirovaniem-karuseli-randomnykh-kartinok.html)

EvanBrown 05.11.2019 16:48

Проблема с анимированием карусели рандомных картинок
 
Здравствуйте, господа и дамы. Возникла проблема: при воспроизведении при нажатии на кнопку анимация подтормаживает (а именно прыгает к первой картинке и визуально начинает прокрутку с первой картинки). Также, чаще всего рандом выбирает только 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>

рони 05.11.2019 17:28

Цитата:

Сообщение от EvanBrown
. Также, чаще всего рандом выбирает только 1 картинку, некоторые и вовсе не выбирает (проверено в районе 100 кручений)

строка 17
option.stopImageNumber = Math.random() * $(".roulette-inner img").length|0;


строка 31
$(".roulette-inner img").eq(option.stopImageNumber).addClass("active");

EvanBrown 05.11.2019 19:20

Цитата:

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


строка 31
$(".roulette-inner img").eq(option.stopImageNumber).addClass("active");

Можно чуть подробнее, если не сложно :)

рони 05.11.2019 19:42

EvanBrown,
заменить строки на предложенный код.

EvanBrown 05.11.2019 19:51

К сожалению, не помогло(

рони 05.11.2019 20:10

EvanBrown,
выпадает одно и тоже?

EvanBrown 05.11.2019 20:14

Цитата:

Сообщение от рони (Сообщение 514934)
EvanBrown,
выпадает одно и тоже?

Да

рони 05.11.2019 20:44

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>

EvanBrown 05.11.2019 20:51

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

рони 05.11.2019 22:35

рулетка горизонтальная
 
Цитата:

Сообщение от 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>

EvanBrown 06.11.2019 18:39

Большое спасибо за помощь!:)

EvanBrown 06.11.2019 19:06

Но появилась новая проблемка: когда я вставляю в этот код
$(function() {
var k = 9, n = 9, w = 76;  //количество картинок , сколько показывать , ширина картинки
for (var i=0; i<k; i++)  {
$("<img>", {src : "images/1.png"}).appendTo(".roulette-inner")
$("<img>", {src : "images/2.png"}).appendTo(".roulette-inner")
$("<img>", {src : "images/2.png"}).appendTo(".roulette-inner")
}

таким образом несколько картинок, а именно от 3 и более, то появляется ниже 2-я строка в этими же картинками (при добавлении 2-х всё нормально)
Для наглядности:

рони 06.11.2019 19:15

Цитата:

Сообщение от EvanBrown
//количество картинок

если картинок 9 то for (var i=0; i<k/3; i++) !!!

EvanBrown 06.11.2019 21:34

Спасибо за ответ!)

sayman100 23.07.2023 18:43

Рулетка с div блоками
 
Цитата:

Сообщение от рони (Сообщение 514942)
<!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>

Народ, а как в этом скрипте под каждой картинкой добавить кнопку, либо вообще заменить картинки div блоками, для того чтобы можно было что угодно вставить за место картинок, увеличение по центру мне не нужно, эту функцию можно убрать. Вообще мне нужен просто данный скрипт с 30-ю картинками и кнопкой под каждой картинкой, пытался сам переделать, никак не выходит, я слаб еще в таких скриптах, и еще бы хотелось сделать старт резкий на данной рулетке, остановка плавная. (другие скрипты по этой теме смотрел не подходят, этот то что мне нужен, но кнопки не могу вставить) Помогите плиззз!

рони 23.07.2023 19:44

Цитата:

Сообщение от sayman100
заменить картинки div блоками,

<!DOCTYPE html>
<html>

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

        .roulette-inner div {
            width: 72px;
            height: 72px;
            margin: 2px;
            border: 1px solid #0000FF;
            text-align: center;
            line-height: 72px;


        }

        .roulette-inner div.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-inner div.active:after{
           content: ' click me';
        }

        .roulette {
            overflow: hidden;
            height: 126px;
            width: 532px;
            border: 3px solid #8B4513;
        }

        .roulette-inner {
            position: relative;
            top: 24px;
            width: 17000px;
            display: flex;
        }
    </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 (let i = 0; i < k; i++) {
                $("<div>", {
                    text: +i,
                    click: function() {
                        if (this.classList.contains('active')) alert(i)
                    }
                }).appendTo(".roulette-inner");
            }
            for (let i = 0; i < k; i++) {
                $("<div>", {
                    text: +i,
                    click: function() {
                        if (this.classList.contains('active')) alert(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  div").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  div").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>

sayman100 23.07.2023 23:17

То, что надо, спасибо большое

sayman100 24.07.2023 21:39

Заменить картинки div боками
 
Я дико извиняюсь, но подскажите еще, как правильно слова за место цифр вписать, а то у меня начинает скрипт коряво работать, подскажите на примере (слово1, слово2, словл3 и т.д.) как их правильно вставить

рони 24.07.2023 21:59

Цитата:

Сообщение от sayman100
слово1, слово2, словл3 и т.д.

строки 63 и 71
text: 'слово '+ (i + 1),

sayman100 24.07.2023 22:51

Выставить 10 разных слов в ряд
 
Я не понимаю почему у меня каждое слово повторяется, в 58 строке ставлю допустим 10 слов и у меня каждое слово повторяется 10 раз, а как выставить 10 разных слов без повторений? я уже запутался )

рони 24.07.2023 23:51

Цитата:

Сообщение от sayman100
а как выставить 10 разных слов без повторений? я уже запутался )

<!DOCTYPE html>
<html>

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

        .roulette-inner div {
            width: 72px;
            height: 72px;
            margin: 2px;
            border: 1px solid #0000FF;
            text-align: center;
            line-height: 72px;


        }

        .roulette-inner div.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-inner div.active:after{
           content: ' click me';
        }

        .roulette {
            overflow: hidden;
            height: 126px;
            width: 532px;
            border: 3px solid #8B4513;
        }

        .roulette-inner {
            position: relative;
            top: 24px;
            width: 17000px;
            display: flex;
        }
    </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; //количество картинок , сколько показывать , ширина картинки
            let word = 'а как выставить 10 разных слов без повторений? я уже запутался )'.split(' ');
            k = word.length;
            for (let i = 0; i < k; i++) {
                $("<div>", {
                    text: word[i],
                    click: function() {
                        if (this.classList.contains('active')) alert(i)
                    }
                }).appendTo(".roulette-inner");
            }
            for (let i = 0; i < k; i++) {
                $("<div>", {
                    text: word[i],
                    click: function() {
                        if (this.classList.contains('active')) alert(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  div").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  div").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>

sayman100 25.07.2023 00:33

То что надо, спасибо

sayman100 26.07.2023 20:40

Запуск скрипта после загрузки сайта
 
<!DOCTYPE html>

<html>
<body>
<style>
.XXX {width: 70px; height: 100px; border: 1px solid red; overflow:hidden;float:left}
.X {font-size:70px;width:100%;text-align:center; height:80px;}/* << вот тут 80!!!*/
</style>
<div id='xxx1' class='XXX'>
<div class='X'>1</div> <!-- а вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div>
</div>
<input type='button' onclick='LetsGo()' value='Старт'>
<script>
var oneHeight=80, // размер одного элемента
numImage=10, // количество элементов
speedStep=0.2; // скорость изменения скорости
function LetsGo(){
clearInterval(LetsGo.interval);
var x=[];
for(var i in{xxx1:1}){
var ob=5+Math.floor(Math.random()*6), // количество оборотов 5 минимум, 10 - максимум
nn=Math.random()*numImage;
num=Math.floor(nn), // выигравший нумер
o={
ob:ob,num:num,
a:document.getElementById(i), // это наш контрол с классом XXX
// время=(speedStart)/speedStep
// расстояние=(speedStart/2)*время -арифм прогр
// расстояние=speedStart^2/(2*speedStep)
// speedStart=sqrt(расстояние*2*speedStep)
speed:Math.sqrt(((ob*numImage+num)* oneHeight)* speedStep*2), // скорость
scr:-26 // магия, блин
}; // выигравший номер
x.push(o);
}
LetsGo.interval=setInterval(
function (){
var i = x.length,complete=true;
while(i--){
var a=x[i];
a.scr+=a.speed;
if(a.speed>2*speedStep){
a.speed-=speedStep;complete=false;
} else if(a.speed>0) {
var t= Math.round(a.scr / oneHeight);
if(t>=numImage) t=0;
console.log(i,t,a.scr-oneHeight*t,a.ob,a.num);
a.scr=oneHeight*t;
a.speed=0;
complete=false;
}
if(a.scr>(oneHeight*numImage))
a.scr-=oneHeight*numImage;
a.a.scrollTop=Math.floor(a.scr);
}
if(complete) clearInterval(LetsGo.interval)
},20)
}
</script>
</body>
</html>

Ребят, а как сделать чтобы данный скрипт загружался только после прогрузки всего сайта, либо с отсрочкой допустим через 5 сек, пытаюсь добавить значение
window.onload = function() {
// Скрипт
};
но скрипт перестает работать, как быть?

рони 26.07.2023 21:02

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

sayman100 26.07.2023 21:45

Запуск скрипта после полной загрузки страницы
 
<!DOCTYPE html>

<html>
<body>
<style>
.XXX {width: 70px; height: 100px; border: 1px solid red; overflow:hidden;float:left}
.X {font-size:70px;width:100%;text-align:center; height:80px;}/* << вот тут 80!!!*/
</style>
<div id='xxx1' class='XXX'>
<div class='X'>1</div> <!-- а вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div>
</div>
<input type='button' onclick='LetsGo()' value='Старт'>
<script>
var oneHeight=80, // размер одного элемента
numImage=10, // количество элементов
speedStep=0.2; // скорость изменения скорости
function LetsGo(){
clearInterval(LetsGo.interval);
var x=[];
for(var i in{xxx1:1}){
var ob=5+Math.floor(Math.random()*6), // количество оборотов 5 минимум, 10 - максимум
nn=Math.random()*numImage;
num=Math.floor(nn), // выигравший нумер
o={
ob:ob,num:num,
a:document.getElementById(i), // это наш контрол с классом XXX
// время=(speedStart)/speedStep
// расстояние=(speedStart/2)*время -арифм прогр
// расстояние=speedStart^2/(2*speedStep)
// speedStart=sqrt(расстояние*2*speedStep)
speed:Math.sqrt(((ob*numImage+num)* oneHeight)* speedStep*2), // скорость
scr:-26 // магия, блин
}; // выигравший номер
x.push(o);
}
LetsGo.interval=setInterval(
function (){
var i = x.length,complete=true;
while(i--){
var a=x[i];
a.scr+=a.speed;
if(a.speed>2*speedStep){
a.speed-=speedStep;complete=false;
} else if(a.speed>0) {
var t= Math.round(a.scr / oneHeight);
if(t>=numImage) t=0;
console.log(i,t,a.scr-oneHeight*t,a.ob,a.num);
a.scr=oneHeight*t;
a.speed=0;
complete=false;
}
if(a.scr>(oneHeight*numImage))
a.scr-=oneHeight*numImage;
a.a.scrollTop=Math.floor(a.scr);
}
if(complete) clearInterval(LetsGo.interval)
},20)
}
</script>
</body>
</html>


Ребят, а как сделать чтобы данный скрипт загружался только после прогрузки всего сайта, либо с отсрочкой допустим через 5 сек, пытаюсь добавить значение
window.onload = function() {
// Скрипт
};
но скрипт перестает работать, как быть?

рони 26.07.2023 22:38

Цитата:

Сообщение от sayman100
с отсрочкой допустим через 5 сек

<!DOCTYPE html>
<html>

<body>
    <style>
        .XXX {
            width: 70px;
            height: 100px;
            border: 1px solid red;
            overflow: hidden;
            float: left
        }

        .X {
            font-size: 70px;
            width: 100%;
            text-align: center;
            height: 80px;
        }

        /* << вот тут 80!!!*/
    </style>
    <div id='xxx1' class='XXX'>
        <div class='X'>1</div>
        <!-- а вот тут - 10 картинок -->
        <div class='X'>2</div>
        <div class='X'>3</div>
        <div class='X'>4</div>
        <div class='X'>5</div>
        <div class='X'>6</div>
        <div class='X'>7</div>
        <div class='X'>8</div>
        <div class='X'>9</div>
        <div class='X'>10</div>
        <div class='X'>1</div>
    </div>
    <input type='button' onclick='LetsGo()' value='Старт'>
    <script>
        var oneHeight = 80, // размер одного элемента
            numImage = 10, // количество элементов
            speedStep = 0.2; // скорость изменения скорости
        function LetsGo() {
            clearInterval(LetsGo.interval);
            var x = [];
            for (var i in {
                    xxx1: 1
                }) {
                var ob = 5 + Math.floor(Math.random() * 6), // количество оборотов 5 минимум, 10 - максимум
                    nn = Math.random() * numImage;
                num = Math.floor(nn), // выигравший нумер
                    o = {
                        ob: ob,
                        num: num,
                        a: document.getElementById(i), // это наш контрол с классом XXX
                        // время=(speedStart)/speedStep
                        // расстояние=(speedStart/2)*время -арифм прогр
                        // расстояние=speedStart^2/(2*speedStep)
                        // speedStart=sqrt(расстояние*2*speedStep)
                        speed: Math.sqrt(((ob * numImage + num) * oneHeight) * speedStep * 2), // скорость
                        scr: -26 // магия, блин
                    }; // выигравший номер
                x.push(o);
            }
            LetsGo.interval = setInterval(
                function() {
                    var i = x.length,
                        complete = true;
                    while (i--) {
                        var a = x[i];
                        a.scr += a.speed;
                        if (a.speed > 2 * speedStep) {
                            a.speed -= speedStep;
                            complete = false;
                        } else if (a.speed > 0) {
                            var t = Math.round(a.scr / oneHeight);
                            if (t >= numImage) t = 0;
                            console.log(i, t, a.scr - oneHeight * t, a.ob, a.num);
                            a.scr = oneHeight * t;
                            a.speed = 0;
                            complete = false;
                        }
                        if (a.scr > (oneHeight * numImage))
                            a.scr -= oneHeight * numImage;
                        a.a.scrollTop = Math.floor(a.scr);
                    }
                    if (complete) clearInterval(LetsGo.interval)
                }, 20)
        }
        window.onload = function() {
            window.setTimeout(LetsGo, 5000)
        };
    </script>
</body>

</html>

sayman100 27.07.2023 00:32

Объединение скриптов
 
Немного не то, тут скрипт автоматически срабатывает через 5 сек, мне это не нужно, мне нужно что бы весь скрипт загружался последним, сначала весь сайт загрузился, а только потом этот скрипт! Функция window.onload = function() {}; на других скриптах работает отлично, но не с этим, на этом не работает, скрипт грузится одновременно со всем сайтом. Дело в том, что у меня к кнопке данного скрипта привязан другой скрипт, который отвечает за количество нажатий на кнопку и он хранит количество нажатий в кеше, в итоге при обновлении страницы сайта, кнопка подгружает из кеша данные о количестве нажатий и если лимит нажатий исчерпан, кнопка подгружает сохраненные данные и в этот момент нажимается сама вызывая тем самым прокрутку скрипта выше.
Ниже прикреплю скрипт самой кнопки, подскажите как их грамотно объединить
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            $.fn.Timer = function Timer(obj) {
                var def = {
                    from: 5E3,
                    duration: 5E3,
                    to: 0,
                    callback: null,
                    step: function(now, fx) {
                        $(fx.elem).html(now | 0)
                    }
                };
                var opt = $.extend({}, def, obj);
                return this.each(function(indx, el) {
                    $(el).queue(function() {
                        el.n = opt.from;
                        $(el).dequeue()
                    });
                    $(el).animate({
                        n: opt.to
                    }, {
                        easing: "linear",
                        duration: opt.duration,
                        step: opt.step,
                        complete: opt.callback
                    })
                })
            };
            var end66 = +localStorage.getItem("end66") || 0,
                duration = 10 * 1E3;
            var num66 = +localStorage.getItem("num66") || 0;
            var max = 10;

            $("#send_sms").on("click", function(event) {
                num66++;
                localStorage.setItem("num66", num66);
                this.textContent = `КРУТИТЬ РУЛЕТКУ ОСТАЛОСЬ ${max - num66}`;
                if (num66 < max) return;
                var time = (new Date).getTime(),
                    d = duration;
                if (end66 && end66 > time) {
                    event.stopPropagation();
                    d = end66 - time;
                } else {
                    localStorage.setItem("end66", time + duration);
                }
                var f = d / 1000 | 0;
                var text = this.defaultValue;
                $(this).prop({
                    disabled: true
                }).Timer({
                    step: function(now, fx) {
                        var a = Math.trunc(now);
                        var b = ['секунда', 'секунды', 'секунд'];
                        a = `${a} ${b[1 == a % 10 && 11 != a % 100 ? 0 : 2 <= a % 10 && 4 >= a % 10 && (10 > a % 100 || 20 <= a % 100) ? 1 : 2]}`;
                           fx.elem.textContent = `ЛИМИТ ЗАКОНЧИЛСЯ`;


                    },
                    from: f,
                    duration: d,
                    to: 0,
                    callback: function() {
                        localStorage.setItem("end66", "0");
                        localStorage.setItem("num66", "0");
                        num66 = 0;
                        $(this).prop({
                            disabled: false
                        }).text("КРУТИТЬ РУЛЕТКУ");
                    }
                })
            })
            if (end66) $("#send_sms").click();

        });
    </script>


</head>

<body>
    
<button class="button" id="send_sms" name="send_sms" type="button" onclick='LetsGo()'>Старт</button>
</body>

</html>


Часовой пояс GMT +3, время: 09:58.