0
我想要一个滑块可以在所有浏览器上工作，但它只适用于Chrome。 我写了一次，然后我重写了它，认为我犯了一些错误。但似乎我失败了，找不到导致我的代码无法在除Chrome之外的任何浏览器中工作的原因。 也应该显示多少缩略图的响应能力只能在Chrome上运行。 我最好的猜测是，这是因为我没有正确使用选择器。jQuery的动画和大小设置只适用于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;
}
});
});
非常感谢您！ – Stefan