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

问题描述 投票：0回答：1

我从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">

谢谢，

汤姆

javascript html css slider
1个回答
0
投票

您在代码中忘记了</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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.