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)

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

Но появилась новая проблемка: когда я вставляю в этот код

$(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-х всё нормально)
Для наглядности:

Цитата:

Сообщение от EvanBrown

//количество картинок

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

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

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

Цитата:

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

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

Заменить картинки div боками

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

Цитата:

Сообщение от sayman100

слово1, слово2, словл3 и т.д.

строки 63 и 71

text: 'слово '+ (i + 1),

Выставить 10 разных слов в ряд

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