Александр's questions

我想让滑块看起来像屏幕截图中的那样，即 nextSlide + 1 在顶部，我在代码中投入了。但我仍然不明白该怎么做。我想为 nextSlide 之后的元素分配一个类（在屏幕截图中它是第三个），并在它离开时将其删除。我希望我解释清楚，我附上截图。

    <div class="main-arrow-container">
        <div class="flex-f-slide">
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>01</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>02</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>03</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
            <div class="slide-item-f">
                <div class="slide-flex">
                    <div class="slide-flex-item1">
                        <div class='slide-img'><img src="https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg" alt=""></div>
                    </div>
                    <div class="slide-flex-item2">
                        <div class='title-slide'>04</div>
                        <div class='title-descr'>lorem ipsum dolor</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

.flex-f-slide{
.slick-slider {
  margin-left: -12%;
  margin-right: -12%;
}

.slick-list {
  padding-top: 10%!important;
  padding-bottom: 10%!important;
  padding-left: 15%!important;
  padding-right: 15%!important;
}


.slick-track {
  max-width: 100%!important;
  transform: translate3d(0, 0, 0)!important;
  perspective: 100px;
}

.slick-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  width: 100%!important;
  transform: translate3d(0, 0, 0);
  transition: transform 1s, opacity 1s;
}

.slick-snext,
.slick-sprev {
  display: block;
}

.slick-current {
  opacity: 1;
  position: relative;
  display: block;
  transform: translate3d(0, 0, -10px);
  z-index: 2;
}

.slick-snext {
  opacity: 0.6;
  transform: translate3d(30%, 0, 0px);
  z-index: 1;
}

.slick-sprev {
  opacity: 0.6;
  transform: translate3d(-30%, 0, 0px);
}

.class_name{
      opacity: 0.6;
  transform: translate3d(-30%, 0, 0px);
}

.test {
  display: block;
  width: 100%;
  height: 300px;
  background: #c00;
  box-shadow: inset 0px 0px 0px 3px #000
}

.slide-img{
    img{
        width: 306px;
        height: 247px;
        border-radius: 10px;
    }
}

.slide-flex{
    display: flex;
    max-width: 615px;
    margin: 0 auto;
    border: 10px solid #1fbcde;
    border-radius: 20px;
}

.title-slide{
    font-family: @play;
    font-weight: bold;
    font-size: 32px;
    letter-spacing: 0.1em;
}

.title-descr{
    line-height: 21px;
    letter-spacing: 0.1em;
    font-size: 18px;
    font-weight: 500;
    color: #333333;
}

.slide-flex-item2{
    padding-left: 48px;
    padding-top: 20px;
    background: #fff;
}

.flex-f-slide{
    margin-top: 35px;
}

.main-arrow-container{
    position: relative;
}

.prev-main-sl,
.next-main-sl {
    position: absolute;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
}

.prev-main-sl{
    right: 41%;
}

.next-main-sl{
    right: 36%;
}
}

var rev = $('.flex-f-slide');
rev.on('init', function(event, slick, currentSlide) {
  var
    cur = $(slick.$slides[slick.currentSlide]),
    next = cur.next(),
    prev = cur.prev();
  prev.addClass('slick-sprev');
  next.addClass('slick-snext');
  cur.removeClass('slick-snext').removeClass('slick-sprev');
  slick.$prev = prev;
  slick.$next = next;
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  //console.log('beforeChange');
  var
    cur = $(slick.$slides[nextSlide]);
  //console.log(slick.$prev, slick.$next);
  slick.$prev.removeClass('slick-sprev');
  slick.$next.removeClass('slick-snext');
  next = cur.next(),
    prev = cur.prev();
  prev.prev();
  prev.next();
  prev.addClass('slick-sprev');
  next.addClass('slick-snext');
  slick.$prev = prev;
  slick.$next = next;
  cur.removeClass('slick-next').removeClass('slick-sprev');
});

rev.slick({
  speed: 1000,
  arrows: true,
  dots: false,
  focusOnSelect: true,
  prevArrow: '<svg class="prev-main-sl" width="46" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity=".5" width="46" height="46" rx="2" fill="#064070"/><rect x="3.173" y="3.172" width="39.655" height="39.655" rx="2" fill="#064070"/><rect x="3.173" y="3.172" width="39.655" height="39.655" rx="2" fill="#064070"/><rect x="3.173" y="3.172" width="39.655" height="39.655" rx="2" fill="#064070"/><path d="M11.983 22.293a1 1 0 000 1.414l6.364 6.364a1 1 0 001.414-1.414L14.104 23l5.657-5.657a1 1 0 00-1.414-1.414l-6.364 6.364zM33.31 22H12.69v2h20.62v-2z" fill="#fff"/></svg>',
  nextArrow: '<svg class="next-main-sl" width="46" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><rect opacity=".5" x="46" y="46" width="46" height="46" rx="2" transform="rotate(-180 46 46)" fill="#064070"/><rect x="42.827" y="42.828" width="39.655" height="39.655" rx="2" transform="rotate(-180 42.827 42.828)" fill="#064070"/><rect x="42.827" y="42.828" width="39.655" height="39.655" rx="2" transform="rotate(-180 42.827 42.828)" fill="#064070"/><rect x="42.827" y="42.828" width="39.655" height="39.655" rx="2" transform="rotate(-180 42.827 42.828)" fill="#064070"/><path d="M34.017 23.707a1 1 0 000-1.414l-6.364-6.364a1 1 0 00-1.414 1.414L31.896 23l-5.657 5.657a1 1 0 101.414 1.414l6.364-6.364zM12.69 24H33.31v-2H12.69v2z" fill="#fff"/></svg>',
  infinite: true,
  centerMode: true,
  slidesPerRow: 1,
  slidesToShow: 1,
  slidesToScroll: 1,
  centerPadding: '0',
  swipe: true,
  customPaging: function(slider, i) {
    return '';
  },
  /*infinite: false,*/
});

我试图在元素更改时更改元素的填充并将其写入localStorage，录制继续，但由于某种原因，重新加载时一切都被重置，尽管localStorage仍然存在。

这就是我认为记录下来似乎合乎逻辑的内容。

var totalDcart = document.querySelector('.dcart-total-count');
var countOfBasket = document.querySelector('.count-of-basket');

// При изменении кол-ва товаров менять padding
totalDcart.addEventListener('DOMSubtreeModified', function(){
    var padd = localStorage.getItem('padding');
    if (Number(totalDcart.innerHTML) >= 10){
        countOfBasket.style.padding = '0 5px';
        localStorage.setItem('padding', countOfBasket.style.padding);

    }else{
        countOfBasket.style.padding = '0 9px';
        localStorage.setItem('padding', countOfBasket.style.padding);
    }
});

countOfBasket.style.padding = localStorage.setItem('padding', padd);

是否可以删除 youtube 视频上的所有可见元素并阻止用户暂停它？

我阅读了文档并最终勾勒出这样的代码，但顶部模具、YouTube 徽标和暂停仍然有效。

 <div id="player"></div>

    <script>
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '800',
          width: '100%',
          videoId: 'P9ylTV2Bg1A',
          playerVars: {'muted': 1, 'autoplay': 1, 'disablekb': 1 , 'controls': 0, 'iv_load_policy': 0, 'loop': 1, 'showinfo': 0, 'modestbranding': 1},
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
          }
        });
      }

      // 4. The API will call this function when the video player is ready.

      function onPlayerReady(event) {
        player.mute();
        event.target.playVideo();
      }


      function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.ENDED) {
            player.playVideo(); 
        }
      }
    </script>

我不知道如何将 src img 转移到另一个带有图片的块中，src 显示在控制台中。并且 [Object Object] 被插入到 src

<!DOCTYPE html> <html lang="en"> <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title> </head> <body>
        <div class="img-wr">
            <img src="a.png" alt="">
            <a class="st" href="javascript:void(0);">получить</a class="st">
        </div>
        <div class="img-wr">
            <img src="b.png" alt="">
            <a class="st" href="javascript:void(0);">получить</a>
        </div>
        <div class="img-wr">
            <img src="3.jpeg" alt="">
            <a class="st" href="javascript:void(0);">получить</a>
        </div>
        <div class="img-wr">
            <img src="4.jpg" alt="">
            <a class="st" href = "javascript:void(0);">получить</a>
        </div>
        <div class="sn">
            <img class="re" src="" alt="">
        </div>
        <script
                  src="https://code.jquery.com/jquery-3.4.1.min.js"
                  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
                  crossorigin="anonymous"></script>
        <!-- <script src="sc.js"></script> -->
        <!-- <script src="script.js"></script> -->
        <script src="sm.js"></script> </body> </html>

$( document ).ready(function() {
        $('.st').click(function () {
        let imgr = $(this).closest('.img-wr').find('img').attr('src');
        $('.re').attr('src', $(imgr));
    });
});

我试图从儿童 Js 一书中了解 OOP Js。它变得有趣了，所以我创建了 2 个由机器（特斯拉、日产）绘制的变量，并使其在变量到达屏幕末尾时显示“完成”消息。

你怎么知道哪个先到？应该是“完this车先到”。但我仍然不明白该怎么做。

var Car = function(x, y) {
  this.x = x;
  this.y = y;
  this.draw();
};

Car.prototype.draw = function() {
  var carHtml = '<img src="http://nostarch.com/images/car.png">';

  this.carElement = $(carHtml);

  this.carElement.css({
    position: 'absolute',
    left: this.x,
    top: this.y
  });

  $('body').append(this.carElement);
};

Car.prototype.moveRight = function(distance) {
  this.x += distance;
  this.carElement.css({
    position: 'absolute',
    left: this.x,
    top: this.y
  });
  if (this.x >= $('html').innerWidth()) {
    tesla.x = 0;
    nissan.x = 0;
    console.log('Первый финишировал ')
  }
};

var tesla = new Car(0, 20);
var nissan = new Car(0, 100);

$('.start').click(function() {
  setInterval(function() {
    tesla.moveRight(Math.floor(Math.random() * 5));
    nissan.moveRight(Math.floor(Math.random() * 5))
  }, 30);
});

$('.stop').click(function() {
  location.reload();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="start">Старт / ускорение</button>
<button class="stop">Стоп</button>

我制作了一个圆形的动画，它在 chrome 中工作，当我在选项卡之间切换时，Firefox 只圆形。正方形本身是扭曲的，但不是圆形的。我问了我的朋友，结果有几个人很好，而其他人也有同样的问题。前缀没有解决问题。

@keyframes turning {
  0% {
    border-radius: 0 0 0 0;
    transform: rotate(0deg);
  }
  25% {
    border-radius: 50% 0 0 0;
    transform: rotate(45deg);
  }
  50% {
    border-radius: 50% 50% 0 0;
    transform: rotate(90deg);
  }
  75% {
    border-radius: 50% 50% 50% 0;
    transform: rotate(135deg);
  }
  100% {
    border-radius: 50% 50% 50% 50%;
    transform: rotate(180deg);
  }
}

div {
  width: 120px;
  height: 120px;
  background-color: violet;
  margin: 100px;
  animation: turning 2s infinite;
}

<div></div>

代码笔

有一个水平站点可以通过 slick 工作并以块为基础工作。滚动到下一张幻灯片时，必须启动该幻灯片上元素的动画（facts-item-hint）。这是它应该如何工作的一个清晰示例https://lore1ei.github.io/第一张幻灯片上一切都很好，第二张幻灯片与第一张幻灯片一起启动，但它应该只在它位于浏览器窗口的可见性。

    <section class="slider">
        <article class="slider_item">
    <div class="header">
        <div class="wraper">
            <div class="logo">
                <img src="img/logo.png" alt="logo">
                <h1>SM-Marketing</h1>
            </div>
            <div class="first-page">
                <div class="method">
                    <h2>Методика №1</h2>
                    <p class="title-p" >по скоростному получению клиентов из интернета</p>
                    <p class="method-p">или <br> как с полного нуля, <br> всего через пару дней <br> начать получать первые заявки</p>
                </div>
                <div class="block-jq">
                    <div class="block-jq-item wow bounceInDown"><div>как найти новых клиентов</div></div>
                    <div class="block-jq-item wow bounceInRight"><div>как получать больше заявок</div></div>
                    <div class="block-jq-item wow bounceInUp"><div>как построить систему лидогенерации</div></div>
                </div>
            </div>
        </div>
    </div>
</article>
<article class="slider_item">
    <div class="facts">
        <div class="wraper wrap100">
            <div class="facts-item">
                <h2>Факт №1</h2>
                <div class="facts-item-hint wow bounceInDown" >Заявки  это сырьё для продаж <br>
                    Не будет заявок – не будет и продаж</div>
            </div>
            <div class="facts-item">
                <h2>Факт №2</h2>
                <div class="facts-item-hint wow bounceInDown" >Прямо сейчас ваши конкуренты используют маркетинговые <br>
                    инструментыи поэтому у них всё впорядке с клиентами </div>
            </div>
        </div>
    </div>
</article>
    </section>

这是滑块的css

.slider 
    width: 100%
    height: 100vh

.slick-list,
.slick-track 
    width: 100%
    height: 100%

.slider__item 
    width: 100%
    height: 100%

这是网站本身在滑块上的工作方式

$(function () {
    $('.slider').slick({
      infinite: false,
      arrows: false
    });

    $('.slider').mousewheel(function (e) {
      if (e.deltaY !== 1) {
        $('.slider').slick('slickNext');
      } else {
        $('.slider').slick('slickPrev');
      }

      e.preventDefault();
    });
  });

我尝试在垂直滚动时使用偏移，它工作正常，但在水平滚动时，所有元素都会立即启动动画。

<script>
        new WOW({
                offset: 100 }).init();
</script>

当浏览器窗口高度增加时，如何使背景高度拉伸？填充不是一个选项，因为该站点是水平滚动的，下面是全屏模式下的屏幕截图，例如，当您按下 f11 时，您需要拉伸背景。我已经尝试了背景的所有属性。

<article class="slider_item">
    <div class="header">
        <div class="wraper">
            <div class="logo">
                <img src="img/logo.png" alt="logo">
                <h1>SM-Marketing</h1>
            </div>
            <div class="first-page">
                <div class="method">
                    <h2>Методика №1</h2>
                    <p class="title-p">по скоростному получению клиентов из интернета</p>
                    <p class="method-p">или <br> как с полного нуля, <br> всего через пару дней <br> начать получать первые заявки</p>
                </div>
                <div class="block-jq">
                    <div class="block-jq-item animated bounceInDown delay-0.5s"><div>как найти новых клиентов</div></div>
                    <div class="block-jq-item animated bounceInRight delay-1s"><div>как получать больше заявок</div></div>
                    <div class="block-jq-item animated bounceInUp delay-2.5s"><div>как построить систему лидогенерации</div></div>
                </div>
            </div>
        </div>
    </div>
</article>

下面的CSS

.slider__item 
    width: 100%
    height: 100%

.header
    background: url(../img/header_bg.png)
    background-repeat: no-repeat
    padding: 70px
    padding-bottom: 170px
    background-position: center
    background-size: 100% 100%

.wraper
    max-width: 1200px
    margin: 0 auto   

.logo
    display: flex

我想做一个温度计，这样当你点击复选框时，填充从下往上顺利进行，包括温度计的分区（因此，当复选框被删除时，填充也会顺利进行） . 对如何为此进行填充和固定 jquery 感兴趣。（复选框的工作方式类似于 toogleClass("check")）。

这是我在 Jquery 中搞砸的

$(".analysis-li").click(function(){
    $(this).toggleClass("check");
    var firstStop = document.getElementById('F1gst1');
    percentage = '10%'; firstStop.setAttribute('offset',percentage);
});

有必要使每个检查类的百分比增加，当这个类被移除时，它会再次减少。下面是html和css

<li class="analysis-li"></li>
<li class="analysis-li"></li>
<li class="analysis-li"></li>
<li class="list analysis-li"></li>
<li class="list analysis-li"></li>
<li class="analysis-li"></li>

li.analysis-li 
    margin-bottom: 54px
    position: relative
    padding-left: 20px
    cursor: pointer

    &::before
        position: absolute
        content: ''
        width: 34px
        height: 34px
        left: -34px
        bottom: 3px
        border: #d3ad4b solid 3px
        background-color: transparent
        cursor: pointer
        background-image: url(../img/check.png) 
        background-repeat: no-repeat
        background-position: center
        background-size: 0

    &.check::before
        background-size: 30px

    &:hover::before
        border-color: #c29846
        transition: .3s