当前位置：文江博客话题详情

Jquery 滑块帮助

发布于 2024-11-03 09:43:09 字数 248 浏览 0 评论 0原文

好吧，我有一个 interspire 购物车，所以很难定制..

无论如何，

这里是我的代码的链接 http://jsfiddle.net/WTvQX/

我无法让滚动正常工作...

它可以工作在我的实际网站上有所不同...

所以我需要帮助...重新做或只是修复..

让我知道

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

习惯那些不曾习惯的习惯 2024-11-10 09:43:09

您需要将“latedLeft”ID 添加到左侧按钮，但是请尝试这样的操作...

演示： http://jsfiddle.net/wdm954/WTvQX/3/

$('#relatedRight').click(function() {
    $('#scool').animate({left: "+=100px"}, 'slow');
});
$('#relatedLeft').click(function() {
    $('#scool').animate({left: "-=100px"}, 'slow');
});

您可以根据自己的喜好调整像素距离和速度。

编辑：尝试这样的事情。第一部分找到所有图像的宽度。然后动画仅在偏移量在范围内时触发。

演示： http://jsfiddle.net/wdm954/WTvQX/5/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
});

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < w) {
        $('#scroll').animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left > -w) {
        $('#scroll').animate({left: "-=100px"}, 'slow');
    }
});

编辑：再一个代码选项在这里。这个会很快停止滚动（注意这里也有 CSS 更改）。

演示：http://jsfiddle.net/wdm954/WTvQX/7/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
    w += parseFloat($(this).css('paddingRight'));
    w += parseFloat($(this).css('paddingLeft'));
    w += parseFloat($(this).css('marginRight'));
    w += parseFloat($(this).css('marginLeft'));
});

$('#scroll').css('width', w + 'px');

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < 0) {
        $('#scroll').stop().animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    var b = $('#bar').width();
    if (offset.left > b-w) {
        $('#scroll').stop().animate({left: "-=100px"}, 'slow');
    }
});

You need to add the "relatedLeft" ID to the left button, however try something like this...

Demo: http://jsfiddle.net/wdm954/WTvQX/3/

$('#relatedRight').click(function() {
    $('#scool').animate({left: "+=100px"}, 'slow');
});
$('#relatedLeft').click(function() {
    $('#scool').animate({left: "-=100px"}, 'slow');
});

You can adjust pixel distance and speed to your liking.

EDIT: Try something like this. The first part finds the width of all the images. Then the animates only fire when the offset is within range.

Demo: http://jsfiddle.net/wdm954/WTvQX/5/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
});

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < w) {
        $('#scroll').animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left > -w) {
        $('#scroll').animate({left: "-=100px"}, 'slow');
    }
});

EDIT: One more code option here. This one will stop scrolling sooner (note there are CSS changes here also).

Demo: http://jsfiddle.net/wdm954/WTvQX/7/

var w = 0;
$('#scroll img').each(function (i, val) {
    w += $(this).width();
    w += parseFloat($(this).css('paddingRight'));
    w += parseFloat($(this).css('paddingLeft'));
    w += parseFloat($(this).css('marginRight'));
    w += parseFloat($(this).css('marginLeft'));
});

$('#scroll').css('width', w + 'px');

$('#relatedRight').click(function() {
    var offset = $('#scroll').offset();
    if (offset.left < 0) {
        $('#scroll').stop().animate({left: "+=100px"}, 'slow');
    }
});
$('#relatedLeft').click(function() {
    var offset = $('#scroll').offset();
    var b = $('#bar').width();
    if (offset.left > b-w) {
        $('#scroll').stop().animate({left: "-=100px"}, 'slow');
    }
});

回复收藏 0 原文

~没有更多了~