Javascript 使用Magicline和Flexslider

我正在使用Flexslider进行幻灯片放映，我正在尝试使用它

到目前为止，一切都很好，但是如果我点击箭头进入下一张幻灯片，magicline不会移动——它只在我将鼠标悬停在某个元素上时起作用

任何帮助都将不胜感激

更新：我把它弄得一团糟-

HTML:

<div id="carousel" class="flexslider">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides">
            <li class="slide-li small-slide-li slide-1 flex-active-slide">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
            <li class="slide-li small-slide-li slide-2">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
            <li class="slide-li small-slide-li slide-3">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
            <li class="slide-li small-slide-li slide-4">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
        </ul>
    </div>
</div>

<ul class="flex-direction-nav">
    <li>
        <a class="flex-prev" href="#">Previous</a>
    </li>
    <li>
        <a class="flex-next" href="#">Next</a>
    </li>
</ul>

jQuery(document).ready(function($) {

jQuery(function scroller($) {

    var $el, leftPos, newWidth,
        $mainNav = $("#carousel");
    $mainNav.append("<div id='arrow'></div>");
    var $magicLine = $("#arrow");
    var $selector = $("#carousel li").position().left;
    console.log($selector)
    $magicLine
        .css("left", $("#carousel li.flex-active-slide").left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#carousel li").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        $magicLine.stop().animate({
            left: leftPos,
        });
    }, 

    function() {
        $magicLine.stop().animate({
            left: $("#carousel li.flex-active-slide").position().left,
        });    
    });



});
});

零售


零售


零售


零售

JS:

<div id="carousel" class="flexslider">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides">
            <li class="slide-li small-slide-li slide-1 flex-active-slide">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
            <li class="slide-li small-slide-li slide-2">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
            <li class="slide-li small-slide-li slide-3">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
            <li class="slide-li small-slide-li slide-4">
                <div class="sml-slide-titles CAPS center">Retail</div>
                <div class="slide-icon"></div>
            </li>
        </ul>
    </div>
</div>

<ul class="flex-direction-nav">
    <li>
        <a class="flex-prev" href="#">Previous</a>
    </li>
    <li>
        <a class="flex-next" href="#">Next</a>
    </li>
</ul>

jQuery(document).ready(function($) {

jQuery(function scroller($) {

    var $el, leftPos, newWidth,
        $mainNav = $("#carousel");
    $mainNav.append("<div id='arrow'></div>");
    var $magicLine = $("#arrow");
    var $selector = $("#carousel li").position().left;
    console.log($selector)
    $magicLine
        .css("left", $("#carousel li.flex-active-slide").left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#carousel li").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        $magicLine.stop().animate({
            left: leftPos,
        });
    }, 

    function() {
        $magicLine.stop().animate({
            left: $("#carousel li.flex-active-slide").position().left,
        });    
    });



});
});

jQuery（文档）.ready（函数（$）{
jQuery（函数滚动条（$）{
var$el、leftPos、newWidth、，
$mainNav=$（“旋转木马”）；
$mainNav.追加（“”）；
变量$magicLine=$（“#箭头”）；
var$selector=$（“#carousel li”）.position（）.左；
console.log（$selector）
$magicLine
.css（“左”，$（“#carousel li.flex活动幻灯片”）。左）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#carousel li”）.hover（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
$magicLine.stop（）.animate({
左：左位置，
});
}, 
函数（）{
$magicLine.stop（）.animate({
左：$（“#carousel li.flex活动幻灯片”）.position（）。左，
});    
});
});
});

当您添加箭头时，它们需要jquery中的“on”函数，因为它们没有预先加载到文档中。看

---

因此，箭头的单击事件需要附加on函数，我认为您可以使用类似于悬停函数的功能。

当您附加箭头时，它们需要jquery中的“on”函数，因为它们未在文档中预加载。看

---

因此，箭头的单击事件需要附加on函数，我认为您可以使用类似于悬停函数的功能。

在您的代码中，我看不到您检查“单击左箭头”和“单击右箭头”事件的地方，因此

箭头只在悬停时移动是正常的

在javascript末尾添加这段代码（以处理单击事件）：

你完成了

工作区：

（更新：我忘记了.flex-prev中的选择器。更新了我的答案和小提琴）
在您的代码中，我看不到任何地方您可以检查“单击左箭头”和“单击右箭头”事件，因此
箭头仅在悬停状态下移动是正常的

在javascript末尾添加这段代码（以处理单击事件）：

你完成了

工作区：

（更新：我忘记了.in
.flex prev
选择器。更新了我的答案和小提琴）
我在这里实现了一个解决方案：


我使用flexsliders“”事件处理程序在单击左/右箭头时使magicline移动。“after”是此功能的理想选择，因为它在每个滑块动画完成后触发

执行此操作的代码如下所示：

after: function (slider) {
 $('.carousel-li.flex-active-slide').mouseover();
}

您将很难想出一个更简单的解决方案；）
 我在这里实现了一个解决方案：


我使用flexsliders“”事件处理程序在单击左/右箭头时使magicline移动。“after”是此功能的理想选择，因为它在每个滑块动画完成后触发

执行此操作的代码如下所示：

after: function (slider) {
 $('.carousel-li.flex-active-slide').mouseover();
}

您将很难想出一个更简单的解决方案；）
 老兄，你太棒了。谢谢此解决方案可行，但使用flexslider的“after”函数将提供更简洁的解决方案。@Fresh是的，但他的方法具有即时反应-更适合user@pinouchon想知道怎么用手机刷卡吗？老兄，你太棒了。谢谢此解决方案可行，但使用flexslider的“after”函数将提供更简洁的解决方案。@Fresh是的，但他的方法具有即时反应-更适合user@pinouchon想知道如何在手机上刷卡吗？