1

这很难用很多背景来解释，所以我为这个疯狂的长问题道歉。此外，我仍在学习，因此任何可以帮助我成为更好的开发人员的建设性反馈都将受到赞赏！

我使用带有遮罩的 jQuery 图像滑块来隐藏所有图像，然后单击功能使图像向左或向右移动 X # 个像素以显示遮罩内的下一个图像。像素数是通过 jQuery 应用于 ul 元素的内联样式定义的，并随着每次点击而改变。滑块要求 css 值等于所有图像的总宽度，然后滑块根据该值计算滑动多远。

在我的例子中，它是 980px 宽。因此，如果您单击右键，ul 会添加“样式：左：-980px”。在下一个它的“style=-1960px”等等。

为了捕获实际查看了多少张幻灯片，我想编写一些 jQuery，根据样式的值更改上一个和下一个按钮的 onclick 属性：left 应用于该 ul 元素。我写了一些代码来做到这一点，但它并没有像预期的那样工作——它似乎是根据元素向前滑动的像素数而不是 css 的实际值来更改 onclick 属性。

我究竟做错了什么？我的最终目标是，当显示第一张图片时，Prev 需要具有 Slide 9 的值，Next 按钮需要具有 Slide 2 的值。在下一张幻灯片上，它将更改为 Slide 1 和 Slide 3，依此类推上。

这是一个工作小提琴。

这是我为滑块编写的函数，但请看一下小提琴，因为它还有很多。所以要求小提琴的链接附有代码：

        $j("#next, #prev").click(function() {
          var slideNumber = $j('ul.imgHolder').get(0).style.left;   
          if (slideNumber == '0px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 3']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 1']);");
                }
            else if (slideNumber == '-980px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 4']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 2']);");
                }
            else if (slideNumber == '-1960px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 5']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 3']);");
                }
            else if (slideNumber == '-2940px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 6']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 4']);");
                }
            else if (slideNumber == '-3920px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 7']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 5']);");
                }
            else if (slideNumber == '-4900px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 8']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 6']);");
                }
            else if (slideNumber == '-5880px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 9']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 7']);");
                }
            else if (slideNumber == '-6860px'){
                    $j('div#next').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 1']);");
                    $j('div#prev').attr("onclick", "_gaq.push(['_trackEvent','Office Tour', 'Click', 'Slide 8']);");
                }
        });
4

0 回答 0