Форум

Lernom · #1 (**permalink**) 19.03.2013, 01:59

Нужна помощь в написании скрипта.
Есть несколько пунктов меню, допустим они называются "главная", "услуги", "персонал", "контакты". И есть четыре картинки в div'е ниже. Нужно, чтобы при нажатии на один из пунктов появлялась соответствующая ей картинка. Изначально стоит картинка пункта меню "главная", а когда происходит нажатие на другой пункт меню, она уезжает, а на ее место приезжает нужная картинка... собственно все. Может кто-нибудь помочь с этим?))

У меня был код, где каждой картинки был присвоен номер, и они ездили туда-сюда, но там эти номера появлялись автоматически при добавлении новой картинки, внутри списка...

рони · #2 (**permalink**) 19.03.2013, 03:04

<!DOCTYPE html>
<html>

    <head>
        <style>
            button {
                font-size:14px;
            }
            img {
                position: relative;
                height: 100px;
                width:50%;
                left : 400px
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <button id="go1">&raquo; Animate Block1</button>
        <button id="go2">&raquo; Animate Block2</button>
        <button id="go3">&raquo; Animate Block2</button>
        <button id="go4">&raquo; Animate Block4</button>
        <br>
        <img id="block2" src="http://ru.lookatcode.com/show/9648057958996398/img1-lg.jpg" alt="">
        <script>
            $("button").click(function () {
                var i = $(this).index() + 1

                $("#block2")

                .animate({
                    width: "20%",
                    left: '-250px'
                }, 800,'linear', function () {
                    $(this).attr({
                        src: "http://ru.lookatcode.com/show/9648057958996398/img" + i + "-lg.jpg"
                    })
                }).animate({
                    width: "50%",
                    left: '400px'
                }, 1500)



            });
        </script>
    </body>

</html>

Lernom · #3 (**permalink**) 20.03.2013, 00:25

Спасибо! Все круто))

Форум

Справочник

Discord чат

Курсы javascript