如何让我的 js 滑块向相反方向移动
How can I make my js slider move the opposite direction?
我试图让我的滑块向相反的方向移动,但我不知道如何让它从右向左移动,而是从左向右移动。我可以让它从右到左,但我遇到的问题是从右到左的运动,它不会保持一个完整的网格,而是两者之间有一个神秘的差距。使用从左到右的方法,网格作为一个巨大的块移动,没有任何中断。
我怎样才能使我的滑块从右到左并停在最后一个 li,并且只用左箭头返回,而不是只按右/按钮进行完全环绕?
http://jsfiddle.net/YDSWA/2/(使用左右箭头键移动滑块)
下面是我的滑块的jS,jsFiddle有CSS和HTML。
jQuery(document).ready(function ($) {
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({
width: slideWidth,
height: slideHeight
});
$('#slider ul').css({
width: sliderUlWidth,
marginLeft: -slideWidth
});
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
right: -slideWidth
}, 700, function () {
$('#slider ul li').prependTo('#slider ul');
$('#slider ul').css('right', '');
})
}
function moveRight() {
$('#slider ul').animate({
right: -slideWidth
}, 700, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('right', '');
})
}
$('#back').click(function () {
moveLeft();
})
$('#next').click(function () {
moveRight();
})
$(document).keydown(function (e) {
if (e.keyCode == 39) {
moveRight();
} else {
}
})
$(document).keydown(function (e) {
if (e.keyCode == 37) {
moveLeft();
} else {
}
})
});
感谢您的帮助!
现场演示
jQ:
jQuery(function($) {
var $sl = $('#slider'),
$ul = $('ul', $sl),
$li = $('li', $ul),
slideCount = $li.length,
slideWidth = $li.width(),
slideHeight = $li.height(),
sliderUlWidth = slideCount * slideWidth;
$sl.css({width: slideWidth, height: slideHeight});
$ul.css({width: sliderUlWidth});
function moveLeft() {
$ul.not(':animated').prepend( $('li:last-child', $ul) )
.css({left:-slideWidth})
.animate({left:0}, 700);
}
function moveRight() {
$ul.not(':animated').animate({left: -slideWidth}, 700, function() {
$(this).css({left: 0}).append( $('li:first-child', this) );
});
}
$('#back, #next').click(function() {
return this.id=='next' ? moveRight() : moveLeft();
});
$(document).keydown(function(e) {
var k = e.which;
if( k==39 || k==37 ){
e.preventDefault();
return k==39? moveRight() : moveLeft();
}
});
});
.CSS:
*{margin:0;padding:0;}
.uni_con {
margin: 0 auto;
width: 1200px;
}
#slider {
position: relative;
overflow: hidden;
margin: 0 auto;
background:#cf5;
}
#slider ul {
position: relative;
left:0;
list-style: none;
background:#f00;
}
#slider ul li {
float: left;
background: none;
width: 1200px;
background:#555;
display: inline;
position: relative;
}
#slider img {
cursor: pointer;
float:left;
height: 400px;
width: 400px;
}
相关文章:
- 无法在jquery中向上或向下移动列表中的多个项目
- 在下拉导航中将文本向左移动
- jquery在循环中向上/向下移动
- 滑块向左移动一定量时触发警报
- 为移动设备调整页面大小时,引导模式会向下移动页面
- 将页面内容向左移动时显示/隐藏右侧面板
- jQuery而不是向左移动.它会褪色.滑块
- Twitter Bootstrap Carousel 在向左或向右滑动控制时不断向上移动
- CSS 拆分页面:左侧展开会导致浮动向下移动
- JS-移动图像,暂停设置的时间,然后将图像向后移动
- 如何使用javascript向右移动图片
- 在移动 Safari 上向下拖动时,触摸事件停止触发 - iPad HTML5
- 角度材质-向左移动md secondary
- jqPlot图形在缩放后向右移动
- 当屏幕尺寸较小时,可使用Javascript向移动菜单添加链接.不再有效
- 用于在移动网站上向移动应用程序显示横幅的JavaScript库
- 无法向移动设备发送推送通知-连接通知失败:80
- 如何在后台向移动设备发送事件
- 点击事件未向移动目标开火
- 无法向移动谷歌地图添加标记