javascript - 逐项滚动轮播
问题描述
我的网站上有一个轮播。当我单击向右或向左箭头按钮时，它会滚动到轮播的最后一项或第一项。单击向右或向左箭头按钮时，如何逐项滚动？
我正在使用这段代码：
// scroll to left
$(rightPaddle).on('click', function() {
$('.menu').animate({scrollLeft: '+=1000'}, 600);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.menu').animate({scrollLeft: '0'}, 600);
});
这是一个工作示例：
// duration of scroll animation
var scrollDuration = 300;
// paddles
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// get items dimensions
var itemsLength = $('.container-menu').length;
var itemSize = $('.container-menu').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 20;
// get wrapper width
var getMenuWrapperSize = function() {
return $('.menu-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size
var menuVisibleSize = menuWrapperSize;
// get total width of all menu items
var getMenuSize = function() {
return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled to the left
var getMenuPosition = function() {
return $('.menu').scrollLeft();
};
// finally, what happens when we are actually scrolling the menu
$('.menu').on('scroll', function() {
// get how much of menu is invisible
menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled so far
var menuPosition = getMenuPosition();
var menuEndOffset = menuInvisibleSize - paddleMargin;
// show & hide the paddles
// depending on scroll position
if (menuPosition <= paddleMargin) {
$(leftPaddle).addClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition < menuEndOffset) {
// show both paddles in the middle
$(leftPaddle).removeClass('hidden');
$(rightPaddle).addClass('hidden');
} else if (menuPosition >= menuEndOffset) {
$(leftPaddle).removeClass('hidden');
$(rightPaddle).addClass('hidden');
}
});
// scroll to left
$(rightPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: '+=1000'
}, 600);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: '0'
}, 600);
});body {
margin: 100px
}
.menu-wrapper {
position: relative;
max-width: 1119px;
height: 100%;
margin: 0;
}
.menu {
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
margin: 0;
padding: 0;
}
.paddle {
position: absolute;
top: 0;
bottom: 0;
cursor: pointer;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 50%;
border: 0;
background: white;
box-shadow: 1px 1px 6px #d0d0d0;
}
.left-paddle {
left: -24px;
top: 92px;
z-index: 9999;
position: absolute;
color: #e21b22;
font-size: 20px;
text-align: center;
}
.right-paddle {
right: -24px;
top: 92px;
z-index: 9999;
position: absolute;
color: #e21b22;
font-size: 20px;
text-align: center;
}
.paddles .fas {
margin: 0;
}
.hidden {
display: none;
}
.container-menu {
display: inline-block;
width: 209px;
margin-right: 11.7px;
box-shadow: 0 0 10px #d4d4d4;
border: 1px solid #E6E6E6;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: #FFF;
}
.menu-body {
float: left;
text-align: left;
}
.item-image {
float: left;
}
.item-image img {
width: 100%;
float: left;
}
.item-info {
float: left;
padding: 10px 22px 15px;
color: #737373;
font-weight: 500;
}
.item-name h1 {
margin: 0;
padding: 0 0 6px;
font-size: 15px;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
display: -webkit-box!important;
-o-line-clamp: 2;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
line-clamp: 2;
white-space: normal;
height: 40px;
min-height: 40px;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 23px;
font-weight: 500;
}
.item-description {
margin: 8px 0;
border-top: 1px solid #E6E6E6;
font-weight: normal;
}
#ml-1 p {
color: #717070;
text-shadow: none;
}
.item-checkout {
margin-bottom: 15px;
font-size: 13px;
font-family: Roboto;
font-weight: 400;
}
.item-checkout i {
color: #f4c150;
font-size: 15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>
<div class='programacao-category'>
<h3><i class='fas fa-laptop-code' /> Programação</h3>
<div class='menu-wrapper'>
<ul class='menu'>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/849470_788a_2.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Inglêsa: AgoraEuFalo - English Club</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 235,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-block'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1383810_0c42.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Espanhola: Espanhol do Juan</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star-half-alt' />4,5 (214)
</div>
<div class='item-price'>R$ 55,90</div>
</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-block'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/566284_7465_2.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Italiana: Gente Italiana</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='far fa-star' /><i class='far fa-star' /> 3,0 (479)
</div>
<div class='item-price'>R$ 119,50</div>
</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1292876_f2f6_23.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Microsoft Excel: Do Básico ao Intermediário</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 499,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1654366_a64e.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Adobe Photoshop</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 25,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://lh6.googleusercontent.com/proxy/zYkKv6L5PN7vtHubvW8gYqJKgq-2nv72oaznwz5iKBl__JlOljFqKQvkovjy--pt3A5Ofprc_EG_XmTRweicbu9ePEecvyTSWjgA2n1htnc0F6VaGskAPOqbDtsT9vk7UPw5tC0=s0-d' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Violão - Você Pode Tocar</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 195,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://lh3.googleusercontent.com/proxy/WBaYqULb8NJoyKd30phU3dHnC1o6iJ5eNe7T98u1PPxBE616yhfbHy6aR1Ao6cI2UphnprtvrujpSGFdAfmBUvM4K1h-E-9y-3DlKGjnmIweFM1SJmJD4MAIEALmUe3CT58NiUvTmA=s0-d' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Desenho Realista com Alexandre Porto</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 510,50</div>
</div>
</div>
</li>
</ul>
<div class='paddles'>
<button class='left-paddle paddle hidden'><i class='fas fa-chevron-left'/></button>
<button class='right-paddle paddle'><i class='fas fa-chevron-right'/></button>
</div>
</div>
</div>解决方案
我建议使用定义的itemSize变量作为移动滑块的量度。由于itemSize是一个项目的宽度，因此滑块将滚动该数量。
scrollLeft: '+=' + itemSize
scrollLeft: '-=' + itemSize
此外，我更新了显示/隐藏箭头的逻辑。在您的代码中，即使menuPosition < menuEndOffset，“下一个”箭头仍然是隐藏的。我改变了那个。
... else if (menuPosition < menuEndOffset) {
// show both paddles in the middle
$(leftPaddle).removeClass('hidden');
$(rightPaddle).removeClass('hidden');
} ...
这是一个工作示例：
// duration of scroll animation
var scrollDuration = 300;
// paddles
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// get items dimensions
var itemsLength = $('.container-menu').length;
var itemSize = $('.container-menu').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 20;
// get wrapper width
var getMenuWrapperSize = function() {
return $('.menu-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size
var menuVisibleSize = menuWrapperSize;
// get total width of all menu items
var getMenuSize = function() {
return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled to the left
var getMenuPosition = function() {
return $('.menu').scrollLeft();
};
// finally, what happens when we are actually scrolling the menu
$('.menu').on('scroll', function() {
// get how much of menu is invisible
menuInvisibleSize = menuSize - menuWrapperSize;
// get how much have we scrolled so far
var menuPosition = getMenuPosition();
var menuEndOffset = menuInvisibleSize - paddleMargin;
// show & hide the paddles
// depending on scroll position
if (menuPosition <= paddleMargin) {
$(leftPaddle).addClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition < menuEndOffset) {
// show both paddles in the middle
$(leftPaddle).removeClass('hidden');
$(rightPaddle).removeClass('hidden');
} else if (menuPosition >= menuEndOffset) {
$(leftPaddle).removeClass('hidden');
$(rightPaddle).addClass('hidden');
}
});
// scroll to left
$(rightPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: '+=' + itemSize
}, 600);
});
// scroll to right
$(leftPaddle).on('click', function() {
$('.menu').animate({
scrollLeft: '-=' + itemSize
}, 600);
});body {
margin:0;
}
.menu-wrapper {
position: relative;
max-width: 1119px;
height: 100%;
margin: 0;
}
.menu {
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
margin: 0;
padding: 0;
}
.paddle {
position: absolute;
top: 0;
bottom: 0;
cursor: pointer;
z-index: 999;
width: 50px;
height: 50px;
border-radius: 50%;
border: 0;
background: white;
box-shadow: 1px 1px 6px #d0d0d0;
}
.left-paddle {
left: -24px;
top: 92px;
z-index: 9999;
position: absolute;
color: #e21b22;
font-size: 20px;
text-align: center;
}
.right-paddle {
right: -24px;
top: 92px;
z-index: 9999;
position: absolute;
color: #e21b22;
font-size: 20px;
text-align: center;
}
.paddles .fas {
margin: 0;
}
.hidden {
display: none;
}
.container-menu {
display: inline-block;
width: 209px;
margin-right: 11.7px;
box-shadow: 0 0 10px #d4d4d4;
border: 1px solid #E6E6E6;
overflow: hidden;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: #FFF;
}
.menu-body {
float: left;
text-align: left;
}
.item-image {
float: left;
}
.item-image img {
width: 100%;
float: left;
}
.item-info {
float: left;
padding: 10px 22px 15px;
color: #737373;
font-weight: 500;
}
.item-name h1 {
margin: 0;
padding: 0 0 6px;
font-size: 15px;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
-ms-line-clamp: 2;
display: -webkit-box!important;
-o-line-clamp: 2;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
line-clamp: 2;
white-space: normal;
height: 40px;
min-height: 40px;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 23px;
font-weight: 500;
}
.item-description {
margin: 8px 0;
border-top: 1px solid #E6E6E6;
font-weight: normal;
}
#ml-1 p {
color: #717070;
text-shadow: none;
}
.item-checkout {
margin-bottom: 15px;
font-size: 13px;
font-family: Roboto;
font-weight: 400;
}
.item-checkout i {
color: #f4c150;
font-size: 15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>
<div class='programacao-category'>
<h3><i class='fas fa-laptop-code' /> Programação</h3>
<div class='menu-wrapper'>
<ul class='menu'>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/849470_788a_2.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Inglêsa: AgoraEuFalo - English Club</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 235,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-block'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1383810_0c42.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Espanhola: Espanhol do Juan</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star-half-alt' />4,5 (214)
</div>
<div class='item-price'>R$ 55,90</div>
</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-block'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/566284_7465_2.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Língua Italiana: Gente Italiana</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='far fa-star' /><i class='far fa-star' /> 3,0 (479)
</div>
<div class='item-price'>R$ 119,50</div>
</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1292876_f2f6_23.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Microsoft Excel: Do Básico ao Intermediário</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 499,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://udemy-images.udemy.com/course/240x135/1654366_a64e.jpg' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Adobe Photoshop</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 25,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://lh6.googleusercontent.com/proxy/zYkKv6L5PN7vtHubvW8gYqJKgq-2nv72oaznwz5iKBl__JlOljFqKQvkovjy--pt3A5Ofprc_EG_XmTRweicbu9ePEecvyTSWjgA2n1htnc0F6VaGskAPOqbDtsT9vk7UPw5tC0=s0-d' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Violão - Você Pode Tocar</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 195,90</div>
</div>
</div>
</li>
<li class='container-menu'>
<div class='menu-body'>
<div class='item-image'>
<img src='https://lh3.googleusercontent.com/proxy/WBaYqULb8NJoyKd30phU3dHnC1o6iJ5eNe7T98u1PPxBE616yhfbHy6aR1Ao6cI2UphnprtvrujpSGFdAfmBUvM4K1h-E-9y-3DlKGjnmIweFM1SJmJD4MAIEALmUe3CT58NiUvTmA=s0-d' />
</div>
<div class='item-info'>
<div class='item-name'>
<h1>Curso de Desenho Realista com Alexandre Porto</h1>
</div>
<div class='item-description'>
<p>por AmoCursos</p>
</div>
<div class='item-checkout'>
<i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
</div>
<div class='item-price'>R$ 510,50</div>
</div>
</div>
</li>
</ul>
<div class='paddles'>
<button class='left-paddle paddle hidden'><i class='fas fa-chevron-left'/></button>
<button class='right-paddle paddle'><i class='fas fa-chevron-right'/></button>
</div>
</div>
</div>推荐阅读
- r - 有没有一种快速的方法来提取与今天日期相对应的几年内的数据
- javascript - TypeError：无法读取 javascript 中检查的 null 错误的属性“已检查”
- bash - 使用 awk 通过几列与文件相交
- pandas - 如何计算一系列 Point 对象和一系列 Polygon 对象之间的距离？
- laravel - 如何更改 laravel 背包中列表字段的类型？
- docker - 如何根据规模 id 动态绑定 docker 卷？
- python - 使用 python 函数替换特定列中的字符然后抛出 TypeError: cannot convert the series to
- php - 无法通过 PHP 将图像文件上传到 S3 存储桶
- python - 无法在俄语/乌克兰语中解码 Python 错误
- maven - mvn clean install - pljava 部署错误 - 需要帮助