对于你的问题,你需要一些东西
>设置两个按钮以在代码中设置侦听器
>获取初始位置,以便计算幻灯片
让divMain = $(‘.product-all-contents’)[0];
let position = $(divMain).children().position().left;
const slideAmount = 150;
这3个变量将是代码的主要值
>最后为幻灯片制作听众
$(‘#arrow-right’).click(function(){
$(divMain).animate({
scrollLeft：position slideAmount
},500);
position = slideAmount;
})
希望这会有所帮助：>
$(document).ready(function() {
let divMain = $('.product-all-contents')[0];
let position = $(divMain).children().position().left;
const slideAmount = 150;
$('#arrow-right').click(function() {
$(divMain).animate({
scrollLeft: position + slideAmount
}, 500);
position += slideAmount;
})
$('#arrow-left').click(function() {
$(divMain).animate({
scrollLeft: position - slideAmount
}, 500);
position -= slideAmount;
})
});
.product-all-contents {
background-color: #f0f0f0;
width: 70%;
margin: auto;
}
.product-contents {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.product-contents .product {
width: 10%;
text-align: center;
height: 150px;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
border-style: solid;
border-width: 3px;
border-color: rgb(145, 147, 150);
background-color: white;
border-radius: 10px
}
.ipads {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.tvs {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.franchise-hub-text,
.cloud-based-text,
.business-analytics-text,
.tech-support-text,
.order-management-text,
.employee-management-text,
.white-label-text,
.brand-label-text,
.lead-tracking-text,
.custom-invoicing-text,
.goal-setting-text,
.customization-tools-text,
.royalty-calculator-text,
.email-marketing-text {
width: 50%;
}
div.goal-setting,
div.customization-tools,
div.custom-invoicing,
div.lead-tracking,
div.email-marketing,
div.royalty-calculator,
div.brand-control,
div.franchisehubtv,
div.cloudbasedtextipad,
div.business-analytics,
div.tech-support,
div.employee-management,
div.order-management,
div.white-label {
display: flex;
margin-left: 15%;
margin-right: 15%;
align-items: center;
background-color: #f0f0f0;
padding: 2%;
margin-bottom: 5%;
}
.product-quotes {
display: block;
padding: 20px 11px;
width: 90%;
color: #3b3b3d;
background: white;
border-radius: 2px;
line-height: 1.625;
font-family: 'Roboto';
font-weight: normal;
"
}
.arrow-down {
width: 0;
height: 0;
margin: auto;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #f0f0f0;
}
.white {
display: none;
}
@media only screen and (max-width: 767px) {
.product-all-contents {
overflow-x: auto;
}
.product-contents .product {
min-width: 50.795%;
margin: 0 2%;
padding-top: 3.91%;
padding-left: 3.91%;
padding-right: 3.91%;
}
}
@media only screen and (max-width: 767px) {
div.goal-setting,
div.customization-tools,
div.custom-invoicing,
div.lead-tracking,
div.email-marketing,
div.royalty-calculator,
div.brand-control,
div.franchisehubtv,
div.cloudbasedtextipad,
div.business-analytics,
div.tech-support,
div.employee-management,
div.order-management,
div.white-label {
display: inline-block !important;
}
}
@media only screen and (max-width: 767px) {
.franchise-hub-text,
.cloud-based-text,
.business-analytics-text,
.tech-support-text,
.order-management-text,
.employee-management-text,
.white-label-text,
.brand-control-text,
.lead-tracking-text,
.custom-invoicing-text,
.goal-setting-text,
.customization-tools-text,
.royalty-calculator-text,
.email-marketing-text {
width: 100%;
}
}
Testing
A
Z
B
C
D
E
M
F
G
K
H
I
J
K
<----
---->
html实现两个箭头向左向右 javascript – 如何在移动视图中点击箭头时向左和向右滚动内容？...
如果觉得《html实现两个箭头向左向右 javascript – 如何在移动视图中点击箭头时向左和向右滚》对你有帮助，请点赞、收藏，并留下你的观点哦！
