我正在做这件事:
$.Slider = function (elt) {
//getting main elements
var _this = this;
this.elt = (elt instanceof $) ? elt : $(elt);
this.wrapper = this.elt.find('.artworks_wrapper');
//creating wrapper template for the triggers
var sliderNav = document.createElement('div');
$(sliderNav).css({
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'space-between',
position: 'absolute',
top: '0',
left: '0',
zIndex: '1',
});
/*position relative for the global slider wrapper
* easier element placement
*/
this.elt.css('position', 'relative');
this.elt.append(sliderNav);
//creating triggers' template
var triggerSample = document.createElement('div');
$(triggerSample).css({
width: '20%',
height: '100%',
backgroundImage: 'url("https://cdn.pixabay.com/photo/2014/03/25/16/59/left-297787_960_720.png")',
backgroundSize: '50% 50%',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
position: 'absolute',
top: '0',
cursor: 'pointer',
});
//specializing left and right triggers
$leftTrigger = $(triggerSample);
$rightTrigger = $leftTrigger.clone(true);
$leftTrigger.css('left', '0');
$rightTrigger.css('transform', 'scaleX(-1)');
$rightTrigger.css('right', '0');
//appending to sliderNav
$(sliderNav).append($leftTrigger);
$(sliderNav).append($rightTrigger);
//getting needed datas about the slides
this.slides = this.elt.find('.art_container');
this.slidesNb = this.slides.length;
this.maxDecal = this.slidesNb - 1;
this.width = parseInt(this.elt.width());
this. hmiddle = this.width / 2;
//decal management variable
this.decal = 0;
this.decals = [this.hmiddle];
//IT WORKS HERE WTF???????
for (var i = 0; i < this.slidesNb; i++) {
var actual = this.slides.get(i);
var actualWidth =
actual.offsetWidth +
parseInt($(actual).css('margin-left')) +
parseInt($(actual).css('margin-right'));
console.log(actual);console.log(actualWidth);
var actualHalfWidth = actualWidth / 2;
_this.decals[i] -= actualHalfWidth;
_this.decals[i + 1] = _this.decals[i] - actualHalfWidth;
}
this.nav = {
left: $leftTrigger,
right: $rightTrigger,
};
};
$.Slider.prototype = {
adjustView: function ()
{
if (this.decal === 0) {
$(this.nav.left).css('visibility', 'hidden');
} else if (this.decal === this.maxDecal) {
$(this.nav.right).css('visibility', 'hidden');
} else {
$(this.nav.left).css('visibility', 'visible');
$(this.nav.right).css('visibility', 'visible');
}
},
adjustPos: function ()
{
var newPose = this.decals[this.decal];
$(this.wrapper).offset({ left: newPose });
},
adjust: function ()
{
this.adjustView();
this.adjustPos();
},
InitEvents: function ()
{
var _this = this;
$(this.nav.left).click(function ()
{
if (_this.decal > 0) {
_this.decal--;
_this.adjust();
}//else doesn't move
}
);
$(this.nav.right).click(function ()
{
if (_this.decal < _this.maxDecal) {
_this.decal++;
_this.adjust();
}//else doesn't move
}
);
},
};
$(document).ready(function () {
$('.artworks_slider').each(function () {
var slider = new $.Slider($(this));
slider.adjust();
slider.InitEvents();
});
});
$(document).resize(function () {
$('.artworks_slider').each(function () {
var slider = new $.Slider($(this));
slider.adjust();
slider.InitEvents();
});
});
html { width: 100%; max-width: 100%; }
body { width: 100%; height: 100vh; }
main
{
width: 100%;
height: 100%;
}
/*------FLEX------*/
.flex_container { display: flex; }
.flex_container.horizontal
{
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.flex_container.vertical
{
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.flex_container.aligned_content
{
-ms-align-items: center;
align-items: center;
}
.flex_container.centered_content
{
justify-content: center;
-ms-align-items: center;
align-items: center;
}
.flex_container.spaced_content
{
justify-content: space-between;
-ms-align-items: center;
align-items: center;
}
.flex_container.stretched_content
{
justify-content: space-around;
-ms-align-items: center;
align-items: center;
}
/*------ART DISPLAY------*/
.artworks_wrapper
{
width: 100%;
height: 100%;
position: absolute;
}
.artworks_wrapper > .art_container:nth-child(1) { margin-left: 20px; }
.artworks_wrapper > .art_container:last-child { margin-right: 20px; }
.art_container
{
margin: 0 10px;
position: relative;
}
.art_container > .art_image.portrait { max-height: 60vh; }
.art_container > .art_image.paysage { max-width: 70vh; }
.art_container > .art_informations
{
padding: 5px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0
}
.artworks_slider
{
width: 100%;
height: 80%;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<main class="flex_container horizontal centered_content">
<div class="artworks_slider">
<div class="artworks_wrapper flex_container horizontal aligned_content">
<figure class="art_container">
<img
class="art_image portrait"
src="https://cdn.pixabay.com/photo/2018/07/08/14/16/cat-3523992_960_720.jpg"
alt="Portrait d'Albator">
<figcaption class="art_informations">
<section class="art_description">
<h2>stuff</h2>
<p>
</p>
</section>
<section class="art_data">
</section>
</figcaption>
</figure>
<figure class="art_container">
<img
class="art_image paysage"
src="https://cdn.pixabay.com/photo/2018/06/23/16/22/romanesco-3493007_960_720.jpg"
alt="">
<figcaption class="art_informations">
<section class="art_description">
<h2>stuff</h2>
<p>
</p>
</section>
<section class="art_data">
</section>
</figcaption>
</figure>
<figure class="art_container">
<img
class="art_image portrait"
src="https://cdn.pixabay.com/photo/2018/07/08/14/16/cat-3523992_960_720.jpg"
alt="">
<figcaption class="art_informations">
<section class="art_description">
<h2>stuff</h2>
<p>
</p>
</section>
<section class="art_data">
</section>
</figcaption>
</figure>
<figure class="art_container">
<img
class="art_image paysage"
src="https://cdn.pixabay.com/photo/2018/06/23/16/22/romanesco-3493007_960_720.jpg"
alt="">
<figcaption class="art_informations">
<section class="art_description">
<h2>stuff</h2>
<p>
</p>
</section>
<section class="art_data">
</section>
</figcaption>
</figure>
</div>
</div>
</main>
</body>
我不明白..。呼叫在这里工作,但在家中不工作。检查图像时的console.log() is within loop and first displays the HTMLElement then it's offsetWidth. Only things changed here are the images. offsetWidth值为they are right,但使用HTMLElement.offsetWidth调用时仍为they are wrong ...
帮助?有没有人?
编辑:删除了body中的'emotions‘。我认为这一切都归结于执行顺序:在内存中加载图像后,脚本可以很好地执行。
发布于 2018-07-17 05:15:15
问题是,当你想要获取图像的宽度时,图像还没有加载。
我已经玩了很久了.
但这里有一个,我主要对此进行了更改:
for (var i = 0; i < this.slidesNb; i++) {
var actual = this.slides.get(i);
var actualWidth =
actual.offsetWidth +
parseInt($(actual).css('margin-left')) +
parseInt($(actual).css('margin-right'));
console.log(actual);console.log(actualWidth);
var actualHalfWidth = actualWidth / 2;
_this.decals[i] -= actualHalfWidth;
_this.decals[i + 1] = _this.decals[i] - actualHalfWidth;
}
变成这样:
// How many images
var imgCollection = this.wrapper.find("img");
var imgCount = imgCollection.length;
console.log(imgCount + " images.");
var imgLoaded = 0;
imgCollection.each(function(){
$(this).on("load",function(){
imgLoaded++;
// When all images are loaded
if(imgLoaded==imgCount){
console.log("All images loaded");
for (var i = 0; i < _this.slidesNb; i++) {
var actual = _this.slides.get(i);
var actualWidth = $(actual).outerWidth(true);
console.log(actualWidth);
var actualHalfWidth = actualWidth / 2;
_this.decals[i] -= actualHalfWidth;
_this.decals[i + 1] = _this.decals[i] - actualHalfWidth;
}
console.log("-----");
console.log(_this.decals);
}
});
});
所以如果你已经明白了.加载所有图像后,进入you测量循环。
为了好玩,我把.offset()
换成了.animate()
。
;)
https://stackoverflow.com/questions/51367628
复制相似问题