jQuery 动画和大小设置仅适用于 Chrome

Question

我试图让滑块在所有浏览器上工作，但它只在 Chrome 上工作。我写过一次，然后我认为我犯了一些错误而重写了它。但似乎我找不到导致我的代码无法在除 Chrome 以外的任何浏览器中工作的原因。此外，它应该显示多少缩略图的响应能力仅适用于 Chrome。我最好的猜测是，这是因为我没有正确使用选择器。

我只写了右箭头的代码，然后就停在那里了，因为我试图找出导致动画不工作的原因以及确定边距和最大幻灯片的计算。

https://jsfiddle.net/b050k4re/

HTML:

<div id="slider-wrapper">
    <h2>Check out our Shows!</h2>
    <p>You can check out each of the hosts bios and podcast list by clicking on their image below!</p>
    <div class="slider-container">
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-left">
        <div id="slider">
            <ul class="slides">
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
        <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>

            </ul>
        </div>
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-right">
    </div>
</div>

CSS:

body {
    margin: 0 0;
}
#slider {
    width: 100%;
    height: 130px;
    overflow: hidden;
    margin: 0px 10px;
    float: left;
}

#slider .slides {
    display: block;
    width: 6000px;
    height: 130px;
    margin: 0;
    padding: 0;
    left: 0;
    position: relative;
}

#slider .slide {
    float: left;
    list-style-type: none;
    width: 121px;
    height: 120px;
    border: 1px solid #fff;
    margin: 5px 10px;
    position: relative;
    box-shadow: 2px 1px 2px #888888;
}

#go-left {
    float: left;
}

#go-right {
    float: right;
}

.arrow {
    width: 40px;
    height: 40px;
    margin-top: 50px;
    cursor: pointer;
}

.arrow#go-right {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.slider-container {
    max-width: 960px;
    width: 100%;
    margin: 0px auto;
    height: 100px;
    margin-top: 50px;
}

#slider > ul > li > a > img {
    height: 100%;
    width: 100%;
}

.show-title {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(0, 8, 21, 0.7);
    line-height: 121px;
    vertical-align: middle;
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 650;
    border-top: 2px #eee solid;
    display: none;
    height: 100%;
}

.slide a {
    width: inherit;
    height: inherit;
    display: block;
}

#slider-wrapper {
    background-color: #eee;
    height: 220px;
    padding-top: 40px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00112c+0,000000+100 */
    background: rgb(0,17,44); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00112c', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#slider-wrapper h2 {
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
    padding: 0px;
    margin-top: -20px;
    text-align: center;
    text-transform: uppercase;
}

#slider-wrapper p {
    color: #fff;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    padding: 0;
    margin-bottom: -30px;
    margin-top: -10px;
}

.slide > a > div > p {
    display: none;
}

jQuery:

jQuery(document).ready(function($) {


// The total number of thumbnails
var thumbnailCount = $("#slider .slides .slide").length;

// Thumbnail size
var thumbWidth = 120;
var thumbHeight = 120;

// Minimum margin between thumbnails
var minMargin = 5;

// Variables through which we determine how many thumbnails
// we can show. We decide this by calculating how many
// fit, taking in consideration margins, thumbnail sizes
// and borders.
var arrowWidth = parseInt($("img#go-left").css("width").replace("px", ""), 10);
var thumbMargin = parseInt($(".slides .slide").css("margin-right").replace("px", ""), 10);
var sliderMargin = parseInt($("#slider").css("margin-right").replace("px", ""), 10);
var slideBorder = parseInt($(".slides .slide").css("border-width").replace("px", ""), 10);

// Slider container holds the arrows and the slides together.
// We want the slider container to have a maximum width
// Default is 960px
// Get the size of the slider-container
var sliderContainer = parseInt($(".slider-container").css("width").replace("px", ""), 10);
// The slides container width must be the slider container width
// minus the arrow widths and the margins of the slides container
// itself.
var slidesContainer = sliderContainer -  (2 * arrowWidth + 2 * sliderMargin);
$("#slider").css("width", slidesContainer);
// The displayed slides limit is decided by the slides container
// width and the width of the thumbnails
var slideLimit = slidesContainer / thumbWidth;
var maxSlides = Math.floor(slideLimit);
// We know the number of maximum slides for the current screen size
// We have to calculate the margins from the remaining size
// depending on the thumbnail border sizes
var remainingSpace = (slideLimit - maxSlides) * thumbWidth;
var newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);

// If the new Margin Sizes are smaller than the minimum margin sizes that we want
// We are going to lower the the slide limit by 1 until the new margins are
// bigger or equal to the wanted minimum margin sizes
while (newMarginSizes <= minMargin && maxSlides >= 1) { 
    maxSlides--;
    remainingSpace = (slideLimit - maxSlides) * thumbWidth;
    newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);
}

// We need to know how much we have to slide the
// slides container in order to show it perfectly.
var slideSize = thumbWidth + newMarginSizes * 2 + slideBorder * 2;

// We assign the new margin sizes for the slides
$(".slides .slide").css({"margin-left": newMarginSizes, "margin-right": newMarginSizes});


// Functionality for left and right arrows
var leftArrow = $(".slider-container #go-left");
var rightArrow = $(".slider-container #go-right");
var slides = $("#slider .slides");
// We need to know how many slides are left to show on either
// sides.
var remainingSlidesRight = thumbnailCount - maxSlides;
var remainingSlidesLeft = 0;


leftArrow.click(function() {

});

rightArrow.click(function() {
    console.log("remaining left: " + remainingSlidesLeft + "\n" + "remaining right: " + remainingSlidesRight);
    if (remainingSlidesRight > 0) {
        slides.animate({'left': "-=" + slideSize}, 1000);
        remainingSlidesRight--;
        remainingSlidesLeft++;
    } else {
        slides.animate({'left': "0"}, 1000);
        remainingSlidesRight = thumbnailCount - maxSlides;
        remainingSlidesLeft = 0;
    }
});

});

Answer 1

参考Retrieval of shorthand CSS properties您需要更改

border-width to border-top-width

in `var slideBorder = parseInt($(".slides .slide").css("border-top-width").replace("px", ""), 10);

有关边框的更多详细信息，请参阅 MDN

所以片段是：

jQuery(document).ready(function($) {


  // The total number of thumbnails
  var thumbnailCount = $("#slider .slides .slide").length;

  // Thumbnail size
  var thumbWidth = 120;
  var thumbHeight = 120;

  // Minimum margin between thumbnails
  var minMargin = 5;

  // Variables through which we determine how many thumbnails
  // we can show. We decide this by calculating how many
  // fit, taking in consideration margins, thumbnail sizes
  // and borders.
  var arrowWidth = parseInt($("img#go-left").css("width").replace("px", ""), 10);
  var thumbMargin = parseInt($(".slides .slide").css("margin-right").replace("px", ""), 10);
  var sliderMargin = parseInt($("#slider").css("margin-right").replace("px", ""), 10);

  // FIX: border-width to border-top-width
  var slideBorder = parseInt($(".slides .slide").css("border-top-width").replace("px", ""), 10);


  // Slider container holds the arrows and the slides together.
  // We want the slider container to have a maximum width
  // Default is 960px
  // Get the size of the slider-container
  var sliderContainer = parseInt($(".slider-container").css("width").replace("px", ""), 10);
  // The slides container width must be the slider container width
  // minus the arrow widths and the margins of the slides container
  // itself.
  var slidesContainer = sliderContainer -  (2 * arrowWidth + 2 * sliderMargin);
  $("#slider").css("width", slidesContainer);
  // The displayed slides limit is decided by the slides container
  // width and the width of the thumbnails
  var slideLimit = slidesContainer / thumbWidth;
  var maxSlides = Math.floor(slideLimit);
  // We know the number of maximum slides for the current screen size
  // We have to calculate the margins from the remaining size
  // depending on the thumbnail border sizes
  var remainingSpace = (slideLimit - maxSlides) * thumbWidth;
  var newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);

  // If the new Margin Sizes are smaller than the minimum margin sizes that we want
  // We are going to lower the the slide limit by 1 until the new margins are
  // bigger or equal to the wanted minimum margin sizes
  while (newMarginSizes <= minMargin && maxSlides >= 1) {
    maxSlides--;
    remainingSpace = (slideLimit - maxSlides) * thumbWidth;
    newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);
  }

  // We need to know how much we have to slide the
  // slides container in order to show it perfectly.
  var slideSize = thumbWidth + newMarginSizes * 2 + slideBorder * 2;

  // We assign the new margin sizes for the slides
  $(".slides .slide").css({"margin-left": newMarginSizes, "margin-right": newMarginSizes});


  // Functionality for left and right arrows
  var leftArrow = $(".slider-container #go-left");
  var rightArrow = $(".slider-container #go-right");
  var slides = $("#slider .slides");
  // We need to know how many slides are left to show on either
  // sides.
  var remainingSlidesRight = thumbnailCount - maxSlides;
  var remainingSlidesLeft = 0;


  leftArrow.click(function() {

  });

  rightArrow.click(function() {
    console.log("remaining left: " + remainingSlidesLeft + "\n" + "remaining right: " + remainingSlidesRight);
    if (remainingSlidesRight > 0) {
      slides.animate({'left': "-=" + slideSize}, 1000);
      remainingSlidesRight--;
      remainingSlidesLeft++;
    } else {
      slides.animate({'left': "0"}, 1000);
      remainingSlidesRight = thumbnailCount - maxSlides;
      remainingSlidesLeft = 0;
    }
  });

});

body {
  margin: 0 0;
}
#slider {
  width: 100%;
  height: 130px;
  overflow: hidden;
  margin: 0px 10px;
  float: left;
}

#slider .slides {
  display: block;
  width: 6000px;
  height: 130px;
  border: 1px solid #fff;
  margin: 0;
  padding: 0;
  left: 0;
  position: relative;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 121px;
  height: 120px;
  border: 1px solid #fff;
  margin: 5px 10px;
  position: relative;
  box-shadow: 2px 1px 2px #888888;
}

#go-left {
  float: left;
}

#go-right {
  float: right;
}

.arrow {
  width: 40px;
  height: 40px;
  margin-top: 50px;
  cursor: pointer;
}

.arrow#go-right {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

.slider-container {
  max-width: 960px;
  width: 100%;
  margin: 0px auto;
  height: 100px;
  margin-top: 50px;
}

#slider > ul > li > a > img {
  height: 100%;
  width: 100%;
}

.show-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 8, 21, 0.7);
  line-height: 121px;
  vertical-align: middle;
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 650;
  border-top: 2px #eee solid;
  display: none;
  height: 100%;
}

.slide a {
  width: inherit;
  height: inherit;
  display: block;
}

#slider-wrapper {
  background-color: #eee;
  height: 220px;
  padding-top: 40px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00112c+0,000000+100 */
  background: rgb(0,17,44); /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00112c', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#slider-wrapper h2 {
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  padding: 0px;
  margin-top: -20px;
  text-align: center;
  text-transform: uppercase;
}

#slider-wrapper p {
  color: #fff;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  padding: 0;
  margin-bottom: -30px;
  margin-top: -10px;
}

.slide > a > div > p {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>


<div id="slider-wrapper">
    <h2>Check out our Shows!</h2>
    <p>You can check out each of the hosts bios and podcast list by clicking on their image below!</p>
    <div class="slider-container">
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-left">
        <div id="slider">
            <ul class="slides">
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>

            </ul>
        </div>
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-right">
    </div>
</div>

`

jQuery 动画和大小设置仅适用于 Chrome

jQuery animate and size settings works only in Chrome

firefox

jquery

jquery-selectors

jquery-animate

microsoft-edge