Javascript 自定义滑块不滑动涉及XSL

我正在制作jQuery滑块，但我似乎无法使滑块真正滑动。箭头起作用是因为添加了我添加的类，但它不会导致图像滑动。图像被绘制到滑块上，并正确显示，图像从右侧滑块上脱落。我的代码没有滑动有什么问题？非常感谢您的帮助 这是我的XSL（出于某种原因，我必须去掉前两个XSL标记才能显示它。如果需要，请告诉我）：

相关产品
 
 

以下是我的jQuery代码：

function slider(wrapper){
$(wrapper + ' ul').each(function () {
    // this part unrelated to resize
    var numItems = $(wrapper + ' li').length; // number of items in slider
    var imgw = $(wrapper + ' li').width(); // width of image in li
    var ml = parseInt($(wrapper + ' li:first-child').css('marginLeft').replace('px','')); //left margin
    var mr = parseInt($(wrapper + ' li:first-child').css('marginRight').replace('px','')); //right margin
    var m = (ml+mr); //total margin
    var itemWidth = (imgw+m); // img width + margin
    var ulWidth = (itemWidth*numItems); // width for ul
    $(wrapper + ' ul').width(ulWidth); // apply ul width
    var $list = $(wrapper + ' .clipper ul');
    var $prev = $(wrapper + ' .leftarrow').css({ display:'block'}); // previous
        var $next = $(wrapper + ' .rightarrow').css({ display:'block'}); // next
        var $clip = $(wrapper + ' .clipper');
        $prev.addClass("disabled");

        if ($(this).width() < $clip.width()){
            $next.addClass("disabled");
            $prev.addClass("disabled");
        } else {
            $next.click(function () { 
                var pos = $list.position();
                var scroll = itemWidth * -1;
                var scrollStop = ((numItems * itemWidth) - $clip.width()) * -1;
                if ((pos.left > scrollStop) && (pos.left + scroll > scrollStop))
                    $list.animate({ left: "+=" + scroll + "px" }, "normal");
                else if (pos.left + scroll <= scrollStop) {
                    $list.animate({ left: scrollStop + "px" }, "normal");
                    $next.addClass("disabled");
                    $prev.removeClass("disabled");
                }
                $prev.removeClass("disabled");

            });

           $prev.click(function () {
                var pos = $list.position();
                var scroll = itemWidth;
                var scrollStop = 0;
                if ((pos.left < scrollStop) && (pos.left + scroll < scrollStop))
                    $list.animate({ left: "+=" + scroll + "px" }, "normal");
                else if (pos.left + scroll >= scrollStop) {
                    $list.animate({ left: scrollStop + "px" }, "normal");
                    $prev.addClass("disabled");
                    $next.removeClass("disabled");
                }
                $next.removeClass("disabled");
            });
        }

});

函数滑块（包装器）{
$（包装器+ul'）。每个（函数（）{
//此部分与调整大小无关
var numItems=$（包装器+'li'）。长度；//滑块中的项目数
var imgw=$（wrapper+'li'）.width（）；//图像在li中的宽度
var ml=parseInt（$（wrapper+'li:first child'）.css（'marginLeft'）.replace（'px'，''）；//左边距
var mr=parseInt（$（wrapper+'li:first child'）.css（'marginRight'）.replace（'px'，''）；//右边距
var m=（ml+mr）；//总利润
var itemWidth=（imgw+m）；//img width+margin
var ulWidth=（itemWidth*numItems）；//ul的宽度
$（包装器+ul'）。宽度（ulWidth）；//应用ul宽度
var$list=$（wrapper+'.clipper ul'）；
var$prev=$（wrapper+'.leftarrow'）.css（{display:'block'}）；//previous
var$next=$（wrapper+'.rightarrow'）.css（{display:'block'}）；//next
var$clip=$（wrapper+'.clipper'）；
$prev.addClass（“已禁用”）；
if（$（this.width（）<$clip.width（））{
$next.addClass（“禁用”）；
$prev.addClass（“已禁用”）；
}否则{
$next.click（函数（）{
var pos=$list.position（）；
var scroll=itemWidth*-1；
var scrollStop=（（numItems*itemWidth）-$clip.width（））*-1；
如果（（位置左>滚动停止）和（（位置左+滚动>滚动停止））
$list.animate（{左：“+=”+滚动+“px”}，“正常”）；
否则如果（位置左+滚动=滚动停止）{
$list.animate（{left:scrollStop+“px”}，“normal”）；
$prev.addClass（“已禁用”）；
$next.removeClass（“禁用”）；
}
$next.removeClass（“禁用”）；
});
}
});

---

}您的XSLT是在客户端还是服务器端执行的？如果在服务器端，是XSLT1.0还是XSLT2.0？XSLT的几个问题：

• 如前所述，它不是XSLT，您是否忘记了XSLT头和名称空间

• xsl:if

  位于根，但不允许位于根，它必须位于序列构造函数中，例如在

  xsl:template

  中
• 解决XSLT问题的最佳方法是将输入节点存储在本地，并针对XSLT处理器脱机运行XSLT。对于XSLT 1.0，可以使用MSXML。您可以使用Visual Studio，也可以使用oXygen或Stylus Studio的试用版
• 如果上面的XSLT是一个代码段，那么变量

  $Node

  没有绑定到任何东西，因为它会引发语法错误
• 如果使用XSLT 1.0，则不能在节点集上使用变量绑定，除非使用供应商扩展函数或most支持的

  exslt:node set

  函数。但在您的情况下，您不需要这样做，只需执行一个

  xsl:apply templates

  ，如果节点不在那里，就不会应用它（通常，XSLT很少有分支和

  xsl:if

  语句）
• 嵌套的

  xsl:for-each

  最好由

  xsl:apply-templates

  和相应的匹配模板替换，这样可以减少嵌套并使其更易于维护
• 您的主要

  xsl:template

  入口点在哪里？你能用实际的XSLT更新你的问题吗？你用什么？您是如何将XSLT与XML绑定的（处理指令、服务器端预处理、客户端前/后处理、其他）

---

我确实有标题和名称空间。出于某种原因，stackoverflow不会将我的xsl块格式化为代码，所以我删除了它们。这是前两行。xslt是在服务器端处理的。我在将图像数据绘制到滑块中时没有遇到问题。我就是不能让滑块真正滑动。我刚刚发布了XSL供参考。

function slider(wrapper){
$(wrapper + ' ul').each(function () {
    // this part unrelated to resize
    var numItems = $(wrapper + ' li').length; // number of items in slider
    var imgw = $(wrapper + ' li').width(); // width of image in li
    var ml = parseInt($(wrapper + ' li:first-child').css('marginLeft').replace('px','')); //left margin
    var mr = parseInt($(wrapper + ' li:first-child').css('marginRight').replace('px','')); //right margin
    var m = (ml+mr); //total margin
    var itemWidth = (imgw+m); // img width + margin
    var ulWidth = (itemWidth*numItems); // width for ul
    $(wrapper + ' ul').width(ulWidth); // apply ul width
    var $list = $(wrapper + ' .clipper ul');
    var $prev = $(wrapper + ' .leftarrow').css({ display:'block'}); // previous
        var $next = $(wrapper + ' .rightarrow').css({ display:'block'}); // next
        var $clip = $(wrapper + ' .clipper');
        $prev.addClass("disabled");

        if ($(this).width() < $clip.width()){
            $next.addClass("disabled");
            $prev.addClass("disabled");
        } else {
            $next.click(function () { 
                var pos = $list.position();
                var scroll = itemWidth * -1;
                var scrollStop = ((numItems * itemWidth) - $clip.width()) * -1;
                if ((pos.left > scrollStop) && (pos.left + scroll > scrollStop))
                    $list.animate({ left: "+=" + scroll + "px" }, "normal");
                else if (pos.left + scroll <= scrollStop) {
                    $list.animate({ left: scrollStop + "px" }, "normal");
                    $next.addClass("disabled");
                    $prev.removeClass("disabled");
                }
                $prev.removeClass("disabled");

            });

           $prev.click(function () {
                var pos = $list.position();
                var scroll = itemWidth;
                var scrollStop = 0;
                if ((pos.left < scrollStop) && (pos.left + scroll < scrollStop))
                    $list.animate({ left: "+=" + scroll + "px" }, "normal");
                else if (pos.left + scroll >= scrollStop) {
                    $list.animate({ left: scrollStop + "px" }, "normal");
                    $prev.addClass("disabled");
                    $next.removeClass("disabled");
                }
                $next.removeClass("disabled");
            });
        }

});