使用jquery从右到左滑动内容 [英] slide content from right to left using jquery
本文介绍了使用jquery从右到左滑动内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当您按下一个按钮时，视口会更改内容（两个）并进行转换。
我想要的是滑动内容。在这里演示，使用 translateX（-200px）可以给我想要的效果。但它从 0px 开始，并转到 -200px 。
简而言之，我要将内容从右向右滑动到右边。
> item.css（{
transform：translateX（-200px），
transition：all 1.0s ease
}
这个零件，它会按预期工作而不滑动。我只想实现滑动。
演示： https://plnkr.co/edit/YylT0p7GGl44WRiMoOGj?p=preview
<！DOCTYPE html>
< html>
< body>
< div class =viewport>
< div class =slider>
< div class =slide>一< / div>
< div class =slide> two< / div>
< div class =slide> three< / div>
< div class =slide> four< / div>
< div class =slide> five< / div>
< div class =slide>六< / div>
< / div>
< / div>
< div class =next>下一页< / div>
< script>
var items = $（'。viewport .slider div'）;
total = items.length;
index = 0;
$（'。next'）。click（function（）{
index + = 1;
cycle（）
}）;
function cycle（）{
item = $（'。viewport .slider div'）。slice（index，index + 1）;
items.hide（）;
item.show（）;
item.css（{
transform：translateX（-200px），
transition： all 1.0s ease
}）
}
< / script>
< / body>
< / html>
解决方案
您可以创建一个容器包含项目的视口要移动项目，只需移动容器 div 中的div div 。
var viewCont = $（'。viewCont'）; var slider = viewCont.find（'。slider'）; var items = slider.find（'。slide'） ; var firstItem = items.first（）; var itemWidth = firstItem.width（）; var fullWidth = items.length * itemWidth; var itemsPerPageInput = $（'＃itemsPerPage'）; var itemsPerPage; var viewWidth; var maxLeft; = $（'＃navLinks ul'）; var dotAmount; var selectedDotClass ='selectedDot'; function setItemsPerPage（newItemsPerPage）{itemsPerPage = newItemsPerPage; viewWidth = itemWidth * itemsPerPage; maxLeft = -fullWidth +（itemWidth * itemsPerPage）; viewCont.width（viewWidth +'px'）; dynamicUL（dotsCont）;} function setItemsPerPageFromScreenWidth（）{var screenRanges = [{min：1024，items：3}，{min：768，max：1024，items：2}，{max：768，items：1} for（var i = 0; i 0？0：left）; if（typeof newLeft ==='number'）{newLeft = checkDot（newLeft）; animateLeft（newLeft）; }} function checkDot（newLeft）{$（'。navSlide'）。removeClass（selectedDotClass）; var nearLeft; var nearDistance; var nearDot; for（var i = 0; i
.viewCont {height：125px; position：relative;}。viewport {border：1px solid; height：100px; width：100％; overflow：hidden; border-right：2px solid red; margin-bottom：5px;}。slider {height：100％;位置：相对; left：0;} div.slide {width：200px;高度：100％;位置：相对; float：left; background：orange;}。btn {cursor：pointer; border-radius：3px;背景颜色：灰色padding：3px 5px; position：relative;}。next {float：right;} prev {float：left;}＃navLinks {width：119px;位置：相对; float：left;}＃navLinks ul {display：inline-block; width：100％; height：10px;}＃navLinks ul li {cursor：pointer; float：left;位置：相对; width：10px; margin-left：2.5px; height：10px; list-style：none; border-radius：50％; background-color：＃555;}。selectedDot {cursor：not-allowed！important; background-color：orange！important;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =viewCont> < div class =viewport> < div class =slider> < div class =slide>一< / div> < div class =slide> two< / div> < div class =slide> three< / div> < div class =slide> four< / div> < div class =slide> five< / div> < div class =slide>六< / div> < / div> < / div> < div class =prev btn>上一页< / div> < div id =navLinks> < ul>< / ul> < / div> < / div>< / div>< / div>< / div>< / div>< div class =next btn>下一页< / div>< / div>< 1/>
When you press next button, viewport changes the content(two)and do transformation.
What I want is,I want to slide the content.As you can see here in demo, using translateX(-200px) can give me desire effect. but it start from 0px and goes to -200px. I want it to start from red strip(right) and end it to black strip(left) for each div.
In short I want to slide the content from right to left with this set up.
NOTE: try to remove,
item.css({
"transform": "translateX(-200px)",
"transition":"all 1.0s ease"
})
this part and it will work as expected without sliding. I just want to implement sliding.
demo : https://plnkr.co/edit/YylT0p7GGl44WRiMoOGj?p=preview
<!DOCTYPE html>
<html>
<body>
<div class="viewport">
<div class="slider">
<div class="slide">one</div>
<div class="slide">two</div>
<div class="slide">three</div>
<div class="slide">four</div>
<div class="slide">five</div>
<div class="slide">six</div>
</div>
</div>
<div class="next">Next</div>
<script>
var items=$('.viewport .slider div');
total=items.length;
index=0;
$('.next').click(function () {
index+=1;
cycle()
});
function cycle() {
item = $('.viewport .slider div').slice(index, index + 1);
items.hide();
item.show();
item.css({
"transform": "translateX(-200px)",
"transition":"all 1.0s ease"
})
}
</script>
</body>
</html>
解决方案
You could creating a container div within the viewport div that contains the items. To move the items, just move the container div.
var viewCont = $('.viewCont');
var slider = viewCont.find('.slider');
var items = slider.find('.slide');
var firstItem = items.first();
var itemWidth = firstItem.width();
var fullWidth = items.length * itemWidth;
var itemsPerPageInput = $('#itemsPerPage');
var itemsPerPage;
var viewWidth;
var maxLeft;
var dotsCont = $('#navLinks ul');
var dotAmount;
var selectedDotClass = 'selectedDot';
function setItemsPerPage(newItemsPerPage) {
itemsPerPage = newItemsPerPage;
viewWidth = itemWidth * itemsPerPage;
maxLeft = -fullWidth + (itemWidth * itemsPerPage);
viewCont.width(viewWidth + 'px');
dynamicUL(dotsCont);
}
function setItemsPerPageFromScreenWidth() {
var screenRanges = [{
min: 1024,
items: 3
}, {
min: 768,
max: 1024,
items: 2
}, {
max: 768,
items: 1
}];
for (var i = 0; i < screenRanges.length; i++) {
var screenRange = screenRanges[i];
if ((typeof screenRange.min === 'number' && Math.min(screen.width, screenRange.min) != screenRange.min) || (typeof screenRange.max === 'number' && Math.max(screen.width, screenRange.max) != screenRange.max)) {
continue;
}
itemsPerPageInput.val(screenRange.items);
return setItemsPerPage(screenRange.items);
}
}
function boundRightIncrement(left, newLeft) {
return left > maxLeft && left - viewWidth < maxLeft ? maxLeft : newLeft;
}
function boundLeftIncrement(left, newLeft) {
return left < 0 && left + viewWidth > 0 ? 0 : newLeft
}
function boundRightSet(left, newLeft) {
return left >= maxLeft && newLeft <= maxLeft ? maxLeft : newLeft;
}
function updateLeft() {
var left = parseInt(slider.css('left'));
var newLeft = left < maxLeft ? maxLeft : (left > 0 ? 0 : left);
if (typeof newLeft === 'number') {
newLeft = checkDot(newLeft);
animateLeft(newLeft);
}
}
function checkDot(newLeft) {
$('.navSlide').removeClass(selectedDotClass);
var nearLeft;
var nearDistance;
var nearDot;
for (var i = 0; i < dotAmount; i ++) {
var dotLink = (itemsPerPage * i);
var dotLeft = getDotLeft(dotLink);
if (newLeft != dotLeft) {
var distance = Math.abs(newLeft - dotLeft);
if(typeof nearDistance !== 'number' || distance < nearDistance) {
nearLeft = dotLeft;
nearDistance = distance;
nearDot = dotLink;
}
continue;
}
$('.navSlide#itemLinks' + dotLink).addClass(selectedDotClass);
return newLeft;
}
$('.navSlide#itemLinks' + nearDot).addClass(selectedDotClass);
return nearLeft;
}
function animateLeft(newLeft, callback) {
slider.animate({
left: newLeft + 'px'
}, 1000, callback);
}
function dynamicUL(ul) {
var lihtml = '';
ul.html('');
dotAmount = items.length / itemsPerPage;
for (i = 0; i < dotAmount; i ++) {
var dotLink = (itemsPerPage * i);
var classAppend = getDotLeft(dotLink) == parseInt(slider.css('left')) ? ' ' + selectedDotClass : '';
lihtml += "<li id='itemLinks" + dotLink + "' class='navSlide" + classAppend + "' data-link='" + dotLink + "'></li>";
}
ul.append(lihtml);
bindClickEvents();
}
function bindClickEvents() {
var navSlide = $(".navSlide");
navSlide.click(function(e) {
navSlide.removeClass(selectedDotClass);
var dotLink = $(e.target).addClass(selectedDotClass).data().link;
animateLeft(getDotLeft(dotLink));
})
}
function getDotLeft(dotLink) {
var newLeft = -(dotLink * itemWidth);
return boundRightSet(parseInt(slider.css('left')), newLeft);
}
$(function() {
slider.width(fullWidth);
itemsPerPageInput.attr('max', items.length);
setItemsPerPageFromScreenWidth();
$('.next').click(function() {
var left = parseInt(slider.css('left'));
var newLeft = left <= maxLeft ? '0' : parseInt(slider.css('left')) - viewWidth;
newLeft = boundRightIncrement(left, newLeft);
newLeft = checkDot(newLeft);
animateLeft(newLeft);
});
$('.prev').click(function() {
var left = parseInt(slider.css('left'));
var newLeft = left >= 0 ? maxLeft : parseInt(slider.css('left')) + viewWidth;
newLeft = boundLeftIncrement(left, newLeft);
newLeft = checkDot(newLeft);
animateLeft(newLeft);
});
itemsPerPageInput.change(function() {
setItemsPerPage(parseInt(itemsPerPageInput.val()));
updateLeft();
});
});
.viewCont {
height: 125px;
position: relative;
}
.viewport {
border: 1px solid;
height: 100px;
width: 100%;
overflow: hidden;
border-right: 2px solid red;
margin-bottom: 5px;
}
.slider {
height: 100%;
position: relative;
left: 0;
}
div.slide {
width: 200px;
height: 100%;
position: relative;
float: left;
background: orange;
}
.btn {
cursor: pointer;
border-radius: 3px;
background-color: gray;
padding: 3px 5px;
position: relative;
}
.next {
float: right;
}
.prev {
float: left;
}
#navLinks {
width: 119px;
position: relative;
float: left;
}
#navLinks ul {
display: inline-block;
width: 100%;
height: 10px;
}
#navLinks ul li {
cursor: pointer;
float: left;
position: relative;
width: 10px;
margin-left: 2.5px;
height: 10px;
list-style: none;
border-radius: 50%;
background-color: #555;
}
.selectedDot {
cursor: not-allowed!important;
background-color: orange!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="viewCont">
<div class="viewport">
<div class="slider">
<div class="slide">one</div>
<div class="slide">two</div>
<div class="slide">three</div>
<div class="slide">four</div>
<div class="slide">five</div>
<div class="slide">six</div>
</div>
</div>
<div class="prev btn">Prev</div>
<div id="navLinks">
<ul></ul>
</div>
<div class="next btn">Next</div>
</div>
<div>Items Per Page:</div>
<input id="itemsPerPage" type="number" min="1" />
这篇关于使用jquery从右到左滑动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
