Javascript.RU

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

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

Но появилась новая проблемка: когда я вставляю в этот код
$(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, 06.11.2019 в 19:08.
Ответить с цитированием
  #13 (permalink)  
Старый 06.11.2019, 19:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от EvanBrown
//количество картинок
если картинок 9 то for (var i=0; i<k/3; i++) !!!
Ответить с цитированием
  #14 (permalink)  
Старый 06.11.2019, 21:34
Новичок на форуме
Отправить личное сообщение для EvanBrown Посмотреть профиль Найти все сообщения от EvanBrown
 
Регистрация: 05.11.2019
Сообщений: 8

Спасибо за ответ!)
Ответить с цитированием
  #15 (permalink)  
Старый 23.07.2023, 18:43
Интересующийся
Отправить личное сообщение для sayman100 Посмотреть профиль Найти все сообщения от sayman100
 
Регистрация: 21.07.2023
Сообщений: 13

Рулетка с div блоками
Сообщение от рони Посмотреть сообщение
<!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-ю картинками и кнопкой под каждой картинкой, пытался сам переделать, никак не выходит, я слаб еще в таких скриптах, и еще бы хотелось сделать старт резкий на данной рулетке, остановка плавная. (другие скрипты по этой теме смотрел не подходят, этот то что мне нужен, но кнопки не могу вставить) Помогите плиззз!
Ответить с цитированием
  #16 (permalink)  
Старый 23.07.2023, 19:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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>
Ответить с цитированием
  #17 (permalink)  
Старый 23.07.2023, 23:17
Интересующийся
Отправить личное сообщение для sayman100 Посмотреть профиль Найти все сообщения от sayman100
 
Регистрация: 21.07.2023
Сообщений: 13

То, что надо, спасибо большое
Ответить с цитированием
  #18 (permalink)  
Старый 24.07.2023, 21:39
Интересующийся
Отправить личное сообщение для sayman100 Посмотреть профиль Найти все сообщения от sayman100
 
Регистрация: 21.07.2023
Сообщений: 13

Заменить картинки div боками
Я дико извиняюсь, но подскажите еще, как правильно слова за место цифр вписать, а то у меня начинает скрипт коряво работать, подскажите на примере (слово1, слово2, словл3 и т.д.) как их правильно вставить
Ответить с цитированием
  #19 (permalink)  
Старый 24.07.2023, 21:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от sayman100
слово1, слово2, словл3 и т.д.
строки 63 и 71
text: 'слово '+ (i + 1),
Ответить с цитированием
  #20 (permalink)  
Старый 24.07.2023, 22:51
Интересующийся
Отправить личное сообщение для sayman100 Посмотреть профиль Найти все сообщения от sayman100
 
Регистрация: 21.07.2023
Сообщений: 13

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



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

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


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