任何人都可以解释我为什么这个滑块在我插入网站时不断调整大小?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了任何人都可以解释我为什么这个滑块在我插入网站时不断调整大小?相关的知识,希望对你有一定的参考价值。

我从codepen.io中选择了一个滑块,并对代码进行了一些更改,当我将它粘贴到Weebly的嵌入代码(我工作的软件)时,它不起作用,因为它不会停止调整大小越来越大。我怎么能阻止它?附:我注意到当我插入javascript代码时它开始这样做...

$(document).ready(function() {
  var slide = $('.slide');
  var viewWidth = $(window).width();
  var viewHeight = $(window).height();
  var sliderInner = $('.slider-inner');
  var childrenNo = sliderInner.children().length

  sliderInner.width(viewWidth * childrenNo);

  // -----------  INITIAL  -----------
  function setWidth() {
    slide.each(function() {
      $(this).width(viewWidth);
      $(this).css('left', viewWidth * $(this).index());
    });
  }

  function setHeight() {
    $('.loading').css('height', viewHeight);
    $('.loading').css('line-height', $('.loading').css('height'));
    $('.slider').css('height', viewHeight);
    slide.each(function() {
      $(this).css('line-height', $('.slider').css('height'));
    });
  }

  setWidth();
  setHeight();
  // -----------  /INITIAL  -----------

  // ----------- RESIZE  -----------
  $(window).resize(function() {
    viewWidth = $(window).width();
    viewHeight = $(window).height();
    setWidth();
    setHeight();
    sliderInner.css("transform", "translateX(-" +
      $('.slider-nav>div.active').index() *
      viewWidth + "px) translateZ(0)");
    $('.slider-inner').width(viewWidth * childrenNo);
  });
  // ----------- /RESIZE  -----------









  // -----------  SET ACTIVE  -----------

  function setActive(element) {
    var clickedIndex = element.index();
    $('.slider-nav .active').removeClass('active');
    element.addClass('active');
    sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
    //translateZ(0)

    $('.slider-inner .active').removeClass('active');
    $('.slider-inner .slide').eq(clickedIndex).addClass('active');
  }

  // ON CLICK NAV
  $('.slider-nav > div').on('click', function() {
    setActive($(this));
  });


  // LEFT - CLICK
  $('.slider-control.left').on('click', function() {
    var indexPos = $('.slider-nav>div.active').index();
    if (indexPos > 0) {
      --indexPos;
    } else {
      indexPos = childrenNo - 1;
    }
    setActive($('.slider-nav > div').eq(indexPos));
  });


  // RIGHT - CLICK
  $('.slider-control.right').on('click', function() {
    var indexPos = $('.slider-nav>div.active').index();
    if (indexPos == childrenNo - 1) {
      indexPos = 0;
    } else {
      ++indexPos;
    }
    setActive($('.slider-nav > div').eq(indexPos));
  });


  // LOADING
  setTimeout(function() {
    $(".slider").fadeIn(500);
  }, 500);


});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  padding: 40px;
  color: #fff;
}

.head h1 {
  font-weight: 300;
  font-size: 4em;
}

.head p.author {
  text-align: right;
}

.head p.console {
  font-size: 10px;
  color: #fff;
}

.loading {
  background-color: #2ecc71;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 500px;
  line-height: 500px;
  text-align: center;
  color: #fff;
  font-size: 2rem;
}

.slider {
  background-color: #fff;
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  display: none;
}

.slider .slider-control {
  height: 100%;
  width: 100px;
  background-color: #fff;
  opacity: 0.01;
  position: absolute;
  top: 0;
  z-index: 20;
  cursor: pointer;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-delay: 0;
  transition-delay: 0;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.slider .slider-control:hover {
  opacity: 0.2;
}

.slider .left {
  left: 0;
}

.slider .right {
  right: 0;
}

.slider .slider-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-visibility: hidden;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.slider .slider-inner .slide {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #f1c40f;
  text-align: center;
  line-height: 500px;
  font-size: 5rem;
  color: #fff;
}

.slider .slider-inner .slide.active {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

.slider .slider-inner .slide:nth-child(2n) {
  background-color: #2ecc71;
}

.slider .slider-inner .slide:nth-child(3n) {
  background-color: #3498db;
}

.slider .slider-inner .slide:nth-child(4n) {
  background-color: #9b50ba;
}

.slider-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 5px;
  padding-bottom: 20px;
  text-align: center;
}

.slider-nav>div {
  float: left;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  z-index: 2;
  display: inline-block;
  margin: 0 15px;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.5;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  background-color: transparent;
}

.slider-nav>div:hover {
  opacity: 1;
}

.slider-nav>div.active {
  background-color: white;
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 1;
}

.long {
  height: 2000px;
  width: 100%;
  background-color: #2ecc71;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head">
  <h1>Gummy Slider</h1>
  <p class="console">test console</p>
</div>
<div class="loading">
  <p>Loading...</p>
</div>
<div class="slider">
  <div class="slider-control left"></div>
  <div class="slider-control right"></div>
  <div class="slider-inner">
    <div class="slide active">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
    <div class="slide">4</div>
    <div class="slide">5</div>
    <div class="slide">6</div>
    <div class="slide">7</div>
    <div class="slide">8</div>
  </div>
  <div class="slider-nav">
    <div class="active"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class="long"></div>

<script type="text/javascript">

谢谢,

汤姆

答案

您在代码中忘记了</script>,这可能就是问题所在。我自己试过这个,效果很好。

请尝试以下方法:

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
</head>
<body>
<div class="head">
  <h1>Gummy Slider</h1>
  <p class="console">test console</p>
</div>
<div class="loading">
  <p>Loading...</p>
</div>
<div class="slider">
  <div class="slider-control left"></div>
  <div class="slider-control right"></div>
  <div class="slider-inner">
    <div class="slide active">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
    <div class="slide">4</div>
    <div class="slide">5</div>
    <div class="slide">6</div>
    <div class="slide">7</div>
    <div class="slide">8</div>
  </div>
  <div class="slider-nav">
     <div class="active"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class="long"></div>

<script type="text/javascript">
$(document).ready(function(){
  var slide = $('.slide');
  var viewWidth = $(window).width();
  var viewHeight = $(window).height();
  var sliderInner = $('.slider-inner');
  var childrenNo = sliderInner.children().length

  sliderInner.width( viewWidth * childrenNo);

// -----------  INITIAL  -----------
  function setWidth() {
    slide.each(function(){
      $(this).width(viewWidth);
      $(this).css('left', viewWidth * $(this).index());
    });
  }

  function setHeight(){
    $('.loading').css('height', viewHeight);
    $('.loading').css('line-height', $('.loading').css('height'));
    $('.slider').css('height', viewHeight);
    slide.each(function(){
      $(this).css('line-height', $('.slider').css('height'));
    });
  }

  setWidth();
  setHeight();
// -----------  /INITIAL  -----------

  // ----------- RESIZE  -----------
  $(window).resize(function(){
    viewWidth = $(window).width();
    viewHeight = $(window).height();
    setWidth();
    setHeight();    
    sliderInner.css("transform", "translateX(-" + 
            $('.slider-nav>div.active').index() * 
            viewWidth + "px) translateZ(0)");
    $('.slider-inner').width( viewWidth * childrenNo);
  });  
// ----------- /RESIZE  -----------









// -----------  SET ACTIVE  -----------

  function setActive(element) {
    var clickedIndex = element.index();
    $('.slider-nav .active').removeClass('active');
    element.addClass('active');
    sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
//translateZ(0)

    $('.slider-inner .active').removeClass('active');
    $('.slider-inner .slide').eq(clickedIndex).addClass('active');
  }

  // ON CLICK NAV
  $('.slider-nav > div').on('click', function(){
    setActive($(this));
  });


  // LEFT - CLICK
  $('.slider-control.left').on('click', function(){
    var indexPos = $('.slider-nav>div.active').index();
    if (indexPos > 0) { --indexPos;
    } else { indexPos = childrenNo-1; }
    setActive($('.slider-nav > div').eq(indexPos));
  });


  // RIGHT - CLICK
  $('.slider-control.right').on('click', function(){
    var indexPos = $('.slider-nav>div.active').index();
    if (indexPos == childrenNo-1) { indexPos = 0;
    } else { ++indexPos; }
    setActive($('.slider-nav > div').eq(indexPos));
  });  


  // LOADING
  setTimeout(function(){
        $(".slider").fadeIn(500);
    }, 500);


});
</script>
<style type="text/css">
* {
  box-sizing: border-box;


 margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  padding: 40px;
  color: #fff;
}
.head h1 {
  font-weight: 300;
  font-size: 4em;
}
.head p.author {
  text-align: right;
}
.head p.console {
  font-size: 10px;
  color: #fff;
}

.loading {
  background-color: #2ecc71;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 500px;
  line-height: 500px;
  text-align: center;
  color: #fff;
  font-size: 2rem;
}

.slider {
  background-color: #fff;
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
  display: none;
}
.slider .slider-control {
  height: 100%;
  width: 100px;
  background-color: #fff;
  opacity: 0.01;
  position: absolute;
  top: 0;
  z-index: 20;
  cursor: pointer;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  -webkit-transition-delay: 0;
          transition-delay: 0;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}
.slider .slider-control:hover {
  opacity: 0.2;
}
.slider .left {
  left: 0;
}
.slider .right {
  right: 0;
}
.slider .slider-inner {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-visibility: hidden;
  -webkit-transition-duration: 0.5s;
          transition-duration: 0.5s;
}
.slider .slider-inner .slide {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #f1c40f;
  text-align: center;
  line-height: 500px;
  font-size: 5rem;
  color: #fff;
}
.slider .slider-inner .slide.active {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}
.slider .slider-inner .slide:nth-child(2n) {
  background-color: #2ecc71;
}
.slider .slider-inner .slide:nth-child(3n) {
  background-color: #3498db;
}
.slider .slider-inner .slide:nth-child(4n) {
  background-color: #9b50ba;
}

.slider-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 5px;
  padding-bottom: 20px;
  text-align: center;
}
.slider-nav > div {
  float: left;
  width: 20px;
  height: 20px;
  border: 1px solid #fff;
  z-index: 2;
  display: inline-block;
  margin: 0 15px;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.5;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  background-color: transparent;
}
.slider-nav > div:hover {
  opacity: 1;
}
.slider-nav > div.active {
  background-color: white;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  opacity: 1;
}

.long {
  height: 2000px;
  width: 100%;
  background-color: #2ecc71;
}
</style>
</body></html>

以上是关于任何人都可以解释我为什么这个滑块在我插入网站时不断调整大小?的主要内容,如果未能解决你的问题,请参考以下文章

Jquery滑块在按钮单击时更新滑块位置时停止滑动

幻灯片滑块在幻灯片更改时暂停youtube视频

TypeError: $(...).slider 不是函数

Revolution Slider Carousel 负载很小

ExtJS 滑块在视图中不可见

JQuery 视差滑块在 Firefox 中损坏