Question

我有一个带导航的图片幻灯片，我想用它添加一个动画元素来突出显示活动幻灯片，使用箭头图形在幻灯片旋转时移动到活动幻灯片。我正在使用jQuery Cycle插件，它将'activeSlide'类添加到相关的幻灯片编号中，我试图让完成的结果类似于http://offerpop.com/上的滑块，其中箭头移动活动自动滑动，也可以点击。

我一直在努力追随这个线程中似乎同样的目标：If $(element) hasClass then .animate() not working?但到目前为止，根据这个建议我还没有按照我的意愿运行它线程。

所以如果有人能帮助我并指出正确的方向，我将不胜感激，因为我真的不知道从哪里开始。感谢

以下是代码的导航部分：

<div id="nav">
    <div id="navitem" class="activeSlide"><a>1</a></div>
    <div id="navitem"><a>2</a></div>
    <div id="navitem"><a>3</a></div>
    <div id="navitem"><a>4</a></div>
    <div id="navitem"><a>5</a></div>
</div>

<div id="nav"></div>    
<div id="arrow"></div>

<script type="text/javascript">
$(document).ready(function() {  
if($('#navitem').hasClass("activeSlide")){
       $("#arrow").animate({marginLeft:"100px"}, 500);
   };
});
</script>

Answer 1

我已经为你做了一个有效的版本，并提供了解释一切如何运作的评论。我还纠正了HTML中的一些错误（多个元素不能具有相同的ID。）这是JSfiddle：http://jsfiddle.net/e6r2e/1/。

<强> HTML ：

<div id="nav">
    <div id="1" class="navitem activeSlide"><a>1</a></div>
    <div id="2" class="navitem"><a>2</a></div>
    <div id="3" class="navitem"><a>3</a></div>
    <div id="4" class="navitem"><a>4</a></div>
    <div id="5" class="navitem"><a>5</a></div>
</div>
<div id="arrow"></div>

<强> CSS ：

.navitem{
    display:block;
    float:left;
    padding:10px 30px;
    cursor:pointer;
}   
.activeSlide{
    background:#ccc;
}
.activeSlide a{
    color:red;
}
#arrow{
    width:10px;
    height:10px;
    background:black;
    position:absolute;
    margin-top:40px;
    left:30px;
}

<强>的JavaScript ：

$(document).ready(function() {
    var slideX = [30, 98, 166, 234, 302], //Define the x-position of the arrow for each slide
        currentSlide = 0; //Current slide variable. Change this to change starting slide.

    //Function to change slides. Accepts one parameter, the slide's jQuery object:
    function changeSlide(slide) {
        $('.activeSlide').removeClass('activeSlide'); //Remove previous slide's activeSlide class
        $(slide).addClass('activeSlide'); //Add activeSlide class to current slide.
        $('#arrow').clearQueue().animate({ //Animate the arrow to the correct location. clearQueue is used so that animations aren't stacked:
            'left': slideX[currentSlide] + 'px' //Animate the 'left' selector (Better than margin-left).
        }, 300); //Animation duration in milliseconds.
    }

    //Rotate through slides:
    rotate = setInterval(function() {
        //Check if we're on the last slide; if so, return to 0:
        if (currentSlide + 1 >= slideX.length) {
            currentSlide = 0;
        } else {
            currentSlide++;
        }
        //Call the changeSlide function with the slide's jQuery object as the parameter.
        changeSlide($('#' + (currentSlide + 1)));

    }, 5000); //Duration to stay on each slide in milliseconds.
    //Animate to clicked slide:
    $('.navitem').click(function() {
        currentSlide = $(this).attr('id') - 1; //Change currentSlide variable to the slide clicked. We use the slide's ID to determine which slide it is, and then subtract one since we deal with numbers starting at 0, not 1.
        changeSlide($(this)); //Call changeSlide function with the new slide's jQuery object as the parameter.
        //Clear and restart our rotate interval so that the timer is reset. Otherwise if we clicked a slide with 1 second left on the timer, it would rotate again in 1 second instead of 5:
        clearInterval(rotate);
        rotate = setInterval(function() {
            if (currentSlide + 1 >= slideX.length) {
                currentSlide = 0;
            } else {
                currentSlide++;
            }
            changeSlide($('#' + (currentSlide + 1)));
        }, 5000);

    });
});

Answer 2

如果这是我，我会使用setInterval（）来调用你已编写的代码。像这样：

function moveArrow()
{
    position_of_currently_active_slide = $(".activeSlide").index("#nav > div");
    margin_based_on_active_slide = (position+1)*30; // +1 because position is 0 indexed
    $("#arrow").animate({marginLeft:margin+"px"}, 500);
}

$(document).ready(function() {  
    setInterval(moveArrow, 900);
});

这样，总有一些东西在寻找带有“activeSlide”的div。 AFAIK，没有“jquery-way”来做这件事。

请注意：您仍然需要修改代码，找出哪个“幻灯片”处于活动状态+剩余多少边距移动它。

如何将动画元素绑定到幻灯片显示导航

2 个答案: