html实现两个箭头向左向右,javascript – 如何在移动视图中点击箭头时向左和向右滚动内容？...

对于你的问题,你需要一些东西

>设置两个按钮以在代码中设置侦听器

>获取初始位置,以便计算幻灯片

让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

<----

---->