Question

所以我正在尝试对此link做点什么。我要做的事情就是当你点击小图像时它会将类添加为活动类，如果已经有一个活动类，它将被移除。

现在我想要的是当我有一个活动的图像时它将自我复制并显示它的大版本，就像我提前发布的链接一样，这是我到目前为止所做的代码。

HTML

    <div class="tumbs">
        <div class="images">
            <ul>
                <li class="sp"><img src="http://i.imgur.com/0QI5Zoo.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/pIy2iYG.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/BjA1ljv.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/BqMjYh2.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/0QI5Zoo.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/pIy2iYG.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/BjA1ljv.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/BqMjYh2.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/0QI5Zoo.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/pIy2iYG.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/BjA1ljv.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/BqMjYh2.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/0QI5Zoo.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/pIy2iYG.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/BjA1ljv.png"/></li>
                <li class="sp"><img src="http://i.imgur.com/BqMjYh2.png"/></li>
            </ul>
        </div>

        <div id="back"><img src="http://i.imgur.com/ukfKZyS.png"/></div>
        <div id="forward"><img src="http://i.imgur.com/rWv4vzS.png"/></div>
    </div>

JQUERY

$(document).ready(function(){
    //When user clicks back button the slider moves to the left
    $('#back').click(function(){
        $('.listImages').animate({left: "-=10px"}, 'fast');
    });
    //When user click forward button the slider moves to the right
    $('#forward').click(function(){
       $('.listImages').animate({left: "+=10px"}, 'fast')
    });

    //When the user clicks on a tumbnail
    $('.sp').click(function(){
        //Removes the previus active class
        $('.active').removeClass('active');
        //Add the active class to the click image
        $(this).addClass('active');
        var $largeImage = $('.active').clone();
        $('.mainImage').html($largeImage)
    });
});

以下是我迄今为止在jsfiddle中所做的工作。

我如何制作＆＃39; .active＆＃39;类复制和缩放更大，我宁愿像我给的第一个链接一样将大图像放在顶部。

感谢您的帮助

我已经更新了JsFiddle，现在唯一缺少的是当用户点击下一个和上一个按钮时图像列表不滚动。

Answer 1

语法错误还是错字？

$('#back').click(function(){
    $('.images').animate({left: "-=10px"}, 'fast');
    //-^ The dot was missing!
});

与Jquery的图像小册子

1 个答案: