去特定的旋转木马滑梯

时间:2013-05-30 18:20:50

标签: javascript jquery slider jquery-animate carousel

你好我的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;
});

0 个答案:

没有答案