Javascript 我的旋转木马在水平方向上工作得很好,但如何使其垂直工作呢?
我在我的网站上有这个旋转木马来显示产品图片。单击LI元素时,该LI将滚动到中心位置。它在水平方向上工作得很好,但如何使它在垂直方向上工作呢 我试着把widt和width改成Height和Height,Left和Left改成Top和Top,ScrollLeft改成ScrollTop,但它当然不能正常工作 演示:Javascript 我的旋转木马在水平方向上工作得很好,但如何使其垂直工作呢?,javascript,jquery,Javascript,Jquery,我在我的网站上有这个旋转木马来显示产品图片。单击LI元素时,该LI将滚动到中心位置。它在水平方向上工作得很好,但如何使它在垂直方向上工作呢 我试着把widt和width改成Height和Height,Left和Left改成Top和Top,ScrollLeft改成ScrollTop,但它当然不能正常工作 演示: 我对小提琴进行了一些修改。希望这有帮助!你应该可以从这里开始 拨弄 JS CSS 在JSFIDLE上工作得很有魅力,谢谢!但这很有趣,因为当我把代码放在我的网站上时,我不得不添加位置:相
我对小提琴进行了一些修改。希望这有帮助!你应该可以从这里开始 拨弄 JS CSS
在JSFIDLE上工作得很有魅力,谢谢!但这很有趣,因为当我把代码放在我的网站上时,我不得不添加位置:相对于product-preview\u desktop-thumbnails-list-inner,否则滚动功能会出现错误,不会集中单击的LI元素。
<div class="product-preview_mobile-thumbnails-list-inner">
<ul>
<li class="product-preview_mobile-thumbnails-list_item">
<img class="current-mobile-thumbnail" src="https://1.bp.blogspot.com/-pdOOEtG_uYE/XZOHBvNx0QI/AAAAAAAAAI4/K-ShSavM3sUJMLR-vpZd8yftpm3v3eYPwCLcBGAsYHQ/s320/1.jpg">
</li>
<li class="product-preview_mobile-thumbnails-list_item">
<img src="https://1.bp.blogspot.com/-SVSc51GKlfk/XZOHBrU-r8I/AAAAAAAAAI8/87c17psUxsgQImo9DNwpLH_lqEN5ycoXQCLcBGAsYHQ/s320/2.jpg">
</li>
<li class="product-preview_mobile-thumbnails-list_item">
<img src="https://1.bp.blogspot.com/-WzhHuteXzpU/XZOHBinqdxI/AAAAAAAAAI0/r4eCe3ECseogebJUueeQ3W_3nDIHSwdsQCLcBGAsYHQ/s320/3.jpg">
</li>
<li class="product-preview_mobile-thumbnails-list_item">
<img src="https://1.bp.blogspot.com/-J0ky_WiapH4/XZOHCQ-LdgI/AAAAAAAAAJA/STOcX4imVZ05o62p9ovVvM-jsUtJ4tKWwCLcBGAsYHQ/s320/4.jpg">
</li>
<li class="product-preview_mobile-thumbnails-list_item">
<img src="https://1.bp.blogspot.com/-LgovTz7CQNk/XZOHDMKOPUI/AAAAAAAAAJE/3r3zCOO9JGIMMHbsP6RSOlyVWnZ1EQn9wCLcBGAsYHQ/s320/5.jpg">
</li>
</ul>
</div>
.product-preview_mobile-thumbnails-list-inner {
margin: 0 auto;
width: 200px;
overflow-x: scroll;
float: left;
white-space: nowrap;
}
.product-preview_mobile-thumbnails-list-inner ul {
margin: 0 auto;
height: 100%;
list-style: none;
width: max-content;
padding: 0 20px;
}
.product-preview_mobile-thumbnails-list_item {
display: inline-block;
margin: 0 13.49px 0 0;
}
.product-preview_mobile-thumbnails-list_item:last-child {
margin: 0;
}
.product-preview_mobile-thumbnails-list_item img {
border: 0;
border-top: 2px solid gainsboro;
box-shadow: none;
background: #FFF;
padding: 12.5px 0 0;
border-radius: 0;
width: 60px;
height: 60px;
}
.current-mobile-thumbnail {
border-top-color: #231f20!important;
}
$('.product-preview_mobile-thumbnails-list-inner ul li').on('click', function(e) {
var container = $(this).parent().parent();
var slideWidth = $(this).width();
var frameWidth = container.width() / 2;
var slidePosition = $(this).position().left;
var offset = container.scrollLeft() + slidePosition - frameWidth + slideWidth / 2;
container.animate({
scrollLeft: offset
}, 250);
e.preventDefault();
});
$('.product-preview_mobile-thumbnails-list-inner ul li img').on('click', function(){
$('img.current-mobile-thumbnail').removeClass('current-mobile-thumbnail');
$(this).addClass('current-mobile-thumbnail');
});
$(".product-preview_mobile-thumbnails-list-inner ul li").on("click", function(e) {
var container = $(this).parent().parent();
var slideWidth = $(this).height();
var frameWidth = container.height() / 2;
var slidePosition = $(this).position().top;
var offset = container.scrollTop() + slidePosition - frameWidth + slideWidth / 2;
container.animate(
{
scrollTop: offset
},
250
);
e.preventDefault();
});
$(".product-preview_mobile-thumbnails-list-inner ul li img").on(
"click",
function() {
$("img.current-mobile-thumbnail").removeClass("current-mobile-thumbnail");
$(this).addClass("current-mobile-thumbnail");
}
);
.product-preview_mobile-thumbnails-list-inner {
margin: 0 auto;
width: 100px;
overflow-y: scroll;
overflow-x: hidden;
float: left;
white-space: nowrap;
}
.product-preview_mobile-thumbnails-list-inner ul {
margin: 0 auto;
height: 200px;
list-style: none;
width: max-content;
padding: 0 20px;
}
.product-preview_mobile-thumbnails-list_item {
display: block;
margin: 0 13.49px 0 0;
}
.product-preview_mobile-thumbnails-list_item:last-child {
margin: 0;
}
.product-preview_mobile-thumbnails-list_item img {
border: 0;
border-top: 2px solid gainsboro;
box-shadow: none;
background: #FFF;
padding: 12.5px 0 0;
border-radius: 0;
width: 60px;
height: 60px;
}
.current-mobile-thumbnail {
border-top-color: #231f20!important;
}