我试图使滑块向相反方向移动,但是我不知道如何使滑块从右向左移动,而是从左向右移动。我可以使它从右向左移动,但是我遇到的问题是从右向左移动,它没有保持完整的网格,相反,它们是两者之间的神秘缺口。使用从左到右的方法,网格作为一个巨大的块移动而没有任何中断。
我如何才能使滑块从右向左移动并停在最后一个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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句