Javascript-форум - Проблема с анимированием карусели рандомных картинок

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

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

Цитата:

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

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

Запуск скрипта после загрузки сайта

<!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> 
<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() {
// Скрипт
};
но скрипт перестает работать, как быть?

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

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

[html run]
... минимальный код страницы с вашей проблемой
[/html]

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

Запуск скрипта после полной загрузки страницы

<!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() {
// Скрипт
};
но скрипт перестает работать, как быть?

Цитата:

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

Объединение скриптов

Немного не то, тут скрипт автоматически срабатывает через 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>