当用户将鼠标悬停在产品图块上时,我想在产品列表页面上实现滚动图像。最初将显示第一张图像,并在悬停时开始幻灯片放映。每个产品图块将具有不同数量的幻灯片图像。
问题:将鼠标悬停在一个阵列上有五个图像的图像上时,开始放映幻灯片并显示第二个图像,但是显示的是第一幅图像而不是第三幅图像。以下是顺序:
数字表示图像索引
1,2
1,2,3
1,2,3,4
1,2,3,4,5
预期:1、2、3、4、5
还观察到鼠标悬停事件未注册。
下面是代码:
<div class="customized-slider-wrapper" data-bind="PLPTileSizeOnHover: $data">
<div class="customized-slider" data-bind="foreach: fullImageURLs">
<div class="individual-tile">
<img data-bind="attr: { src: $index() === 0? $data : '../file/general/show_loader_showcase.gif' }" class="product-images" />
</div>
</div>
</div>
KO代码
ko.bindingHandlers.PLPTileSizeOnHover = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var data = ko.unwrap(valueAccessor());
// Intiallizing variables for product image animation
var _index = 0;
var imgArray = data.fullImageURLs();
var toBeScrolledBy = 0;
var scroller = $(element).find('.customized-slider').eq(0);
var StopAnimation;
element.onmouseover = function () {
//Start Animation
StopAnimation = setInterval(function () {
var totalSlides = $(element).find('.customized-slider').eq(0).children();
var slideWidth = totalSlides[0] && totalSlides[0].clientWidth;
_index++;
$($(element).find('.product-images')[_index]).attr('src', imgArray[_index]);
if (_index >= imgArray.length) {
_index = 0;
}
toBeScrolledBy = slideWidth * _index;
$(scroller).css({
'transform': 'translateX(-' + toBeScrolledBy + 'px)'
});
}, 1500);
}
element.onmouseout = function () {
//End of animation and reseting the index and div postion
clearInterval(StopAnimation);
_index = 0;
$(scroller).css({
'transform': 'translateX(0)'
});
}
}
}
要求是将鼠标悬停时一张一张地加载图像。无法先加载所有图像。
保留开发工具后,代码可在chrome上运行。
小提琴https://jsfiddle.net/harpreetsjs/cvzrnaLy/
最佳答案
问题是mouseover
和mouseout
事件。他们也会被元素的孩子解雇并冒泡。因此,当孩子们四处走动时,您会“随机地”得到这些事件。相反,您想使用mouseenter
和mouseleave
。
我合并了此更改以及一些常规清理:
ko.bindingHandlers.PLPTileSizeOnHover = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var data = ko.unwrap(valueAccessor());
console.log(data);
// Intiallizing variables for product image animation
var _index = 0;
var imgArray = data;
var toBeScrolledBy = 0;
var scroller = $(element).find('.customized-slider').eq(0);
var StopAnimation;
element.onmouseenter = function() {
//Start Animation
console.log("start");
StopAnimation = setInterval(function() {
console.log("Started " + _index);
var totalSlides = scroller.children();
console.log("totalSlides " + totalSlides.length);
var slideWidth = totalSlides[0] && totalSlides[0].clientWidth;
console.log('slideWidth', slideWidth);
_index++;
scroller.find('.product-images').eq(_index).attr('src', imgArray[_index]);
if (_index >= imgArray.length) {
_index = 0;
}
toBeScrolledBy = slideWidth * _index;
scroller.css({
'transform': 'translateX(-' + toBeScrolledBy + 'px)'
});
}, 1500);
}
element.onmouseleave = function() {
//End of animation and reseting the index and div postion
console.log("clear");
clearInterval(StopAnimation);
_index = 0;
scroller.css({
'transform': 'translateX(0)'
});
}
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
console.log("Update cakked");
}
}
var fullImageURLs = ko.observableArray([
'https://product-images.barneys.com/is/image/Barneys/505670716_1_ShoeSide?$oc_grid_fixed$',
'https://product-images.barneys.com/is/image/Barneys/505670733_1_ShoeSide?$oc_grid_fixed$',
'https://product-images.barneys.com/is/image/Barneys/505670750_1_ShoeSide?$oc_grid_fixed$ '
]);
console.log(fullImageURLs());
ko.applyBindings(fullImageURLs);
.customized-slider-wrapper {
height: 370px;
position: relative;
overflow: hidden;
width: 100%;
width: 231px;
}
.customized-slider {
position: absolute;
left: 0;
width: 1800px;
height: 100%;
transition: transform .5s ease 0s;
display: block;
}
.individual-tile {
float: left;
}
.customized-slider-wrapper .customized-slider>div img {
height: 252px;
float: none;
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
vertical-align: middle;
border: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<a class="search-products-images">
<div class="customized-slider-wrapper" data-bind="PLPTileSizeOnHover: $data">
<div class="customized-slider" data-bind="foreach: $data">
<div class="individual-tile">
<img data-bind="attr: { src: $index() === 0? $data : 'http://placehold.it/106&text=1' }" class="product-images" />
</div>
</div>
</div>
</a>
关于javascript - 自定义绑定(bind)的 knockout 滑动图像问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50703902/