你好我的JavaScript代码有问题,我是一个新的JavaScript但学习:)。 我发现了一个旋转木马,我把它放在我的网站上,试图联系作者,但没有希望。 它有幻灯片的下一个/后退按钮,我想为导航链接添加交互性。 Ex点击链接3转到幻灯片3.但似乎无法使它工作。 html是这样的:
<nav class="meniu">
<a href="#">Slide 1</a>
<a href="#">Slide 2</a>
<a href="#">Slide 3</a>
</nav>
<div id="slider">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>
</div>
javascript是这样的:
$(document).ready(function(){
$('.meniu a').each(function(index) {
$(this).attr('id', index);
});});
// ^ should give all anchors in menu area an incremental id starting with 0^
$('.meniu a').click( function(){
//^when you click on anny anchor in menu area^
var goTo = $(this).attr(id) * $('#slider').width()+ $('#slider').width();
//^should make a variable with the id of the selected anchor menu
//and multiply it with the width of the slide IE: 0x800+800, 1x800+800^
$('#slider ul').animate({ left: goTo }, 800, 'swing', function() {});
//^should move the slide to left with the number of goTo variable^
window.location.hash = $(this).attr(id);
//^should set the anchor portion of the url to the slected slide
// ex index.html#2^
});
我设法上传了我的网站 - beta.tropeum.ro 编辑:添加了jsfiddle链接 - http://jsfiddle.net/G7P46/
好的找到答案:
$('.meniu a').click(function(){
var goTo = this.id * - $('#slider').width() ;
$('#slider ul').animate({ left: goTo }, 800, 'swing', function(){});
$('.activenum').removeClass('activenum');
$(this).addClass('activenum');
decount = this.id;
window.location.hash = this.id;
});