Jquery 如何将动画元素绑定到幻灯片导航
我有一个带导航的图像幻灯片，我想用它添加一个动画元素来突出显示活动幻灯片，使用箭头图形，随着幻灯片旋转，箭头图形移动到活动幻灯片。我正在使用jQuery Cycle插件，它将“activeSlide”类添加到相关的幻灯片编号中，并且我正在尝试将完成的结果设置为类似于滑动条，在滑动条上，箭头会自动移动活动幻灯片，也可以单击 我一直试图从这个线程中遵循似乎相同的目标：但到目前为止，根据这个线程的建议，我还没有让它发挥我想要的功能 因此，如果有人能帮助我，并为我指明正确的方向，我将不胜感激，因为我真的不知道从哪里开始。谢谢 以下是代码的导航部分：Jquery 如何将动画元素绑定到幻灯片导航,jquery,jquery-cycle,Jquery,Jquery Cycle,我有一个带导航的图像幻灯片，我想用它添加一个动画元素来突出显示活动幻灯片，使用箭头图形，随着幻灯片旋转，箭头图形移动到活动幻灯片。我正在使用jQuery Cycle插件，它将“activeSlide”类添加到相关的幻灯片编号中，并且我正在尝试将完成的结果设置为类似于滑动条，在滑动条上，箭头会自动移动活动幻灯片，也可以单击 我一直试图从这个线程中遵循似乎相同的目标：但到目前为止，根据这个线程的建议，我还没有让它发挥我想要的功能 因此，如果有人能帮助我，并为我指明正确的方向，我将不胜感激，因为我真的
<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>
1.
2.
3.
4.
5.
$（文档）.ready（函数（）{
if（$（'#navitem'）.hasClass（“活动幻灯片”））{
$（“#箭头”）.animate（{marginLeft:“100px”}，500）；
};
});
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);
});
请注意：您仍然需要修改代码，以确定哪个“幻灯片”处于活动状态+移动它的剩余空间。如果是我，我将使用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);
});
请注意：您仍然需要修改代码，以确定哪个“幻灯片”处于活动状态+移动它的剩余空间。我已经为您制作了一个工作版本，并提供了解释一切工作原理的注释。我还纠正了HTML中的一些错误（多个元素不能具有相同的ID） 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>
.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;
}
$(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);
});
});
<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>
.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;
}
$(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);
});
});
我已经为您制作了一个工作版本，并附有解释一切工作原理的注释。我还纠正了HTML中的一些错误（多个元素不能具有相同的ID） 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>
.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;
}
$(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);
});
});
<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>
.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;
}
$(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);
});
});
你能发布一些代码或创建一个JSFIDLE吗？当然，检查我的线程编辑，在这里还创建了一个基本的JSFIDLE：你能发布一些代码或创建一个JSFIDLE吗？当然，检查我的线程编辑，在这里还创建了一个基本的JSFIDLE：哇，这太疯狂了。非常感谢你，这正是我想要实现的！谢谢你！哇，这太疯狂了。非常感谢你，这正是我想要实现的！谢谢你！