Как к слайдеру прикрутить стрелки влево, вправо

Тема в разделе "JavaScript", создана пользователем th7, 25 июл 2013.

Модераторы: ZiX
  1. th7

    th7 Создатель

    Регистр.:
    21 апр 2008
    Сообщения:
    115
    Симпатии:
    9
    Вот код JavaScript

    Код:
    $(function() {
        var sWidth = $("#focus").width();
        var len = $("#focus ul li").length;
        var index = 0;
        var picTimer;
       
        var btn = "<div class='btnBg'><h1>Самое просматриваемое за последние 7 дней</h1></div><div class='btn'>";
        for(var i=0; i < len; i++) {
            btn += "<span>" + (i+1) + "</span>";
        }
        btn += "</div>"
        $("#focus").append(btn);
        $("#focus .btnBg").css("opacity",0.95);
       
     
        $("#focus .btn span").mouseenter(function() {
            index = $("#focus .btn span").index(this);
            showPics(index);
        }).eq(0).trigger("mouseenter");
     
        $("#focus ul").css("width",sWidth * (len + 1));
       
        $("#focus ul li div").hover(function() {
            $(this).siblings().css("opacity",0.7);
        },function() {
            $("#focus ul li div").css("opacity",1);
        });
       
        $("#focus").hover(function() {
            clearInterval(picTimer);
        },function() {
            picTimer = setInterval(function() {
                if(index == len) {
                    showFirPic();
                    index = 0;
                } else {
                    showPics(index);
                }
                index++;
            },3000);
        }).trigger("mouseleave");
       
        function showPics(index) {
            var nowLeft = -index*sWidth;
            $("#focus ul").stop(true,false).animate({"left":nowLeft},500);
            $("#focus .btn span").removeClass("on").eq(index).addClass("on")
        }
       
        function showFirPic() {
            $("#focus ul").append($("#focus ul li:first").clone());
            var nowLeft = -len*sWidth;
            $("#focus ul").stop(true,false).animate({"left":nowLeft},500,function() {
                $("#focus ul").css("left","0");
                $("#focus ul li:last").remove();
            });
            $("#focus .btn span").removeClass("on").eq(0).addClass("on");
        }
    });
    Как внедрить стрелки влево вправо???
     
  2. etosh

    etosh Создатель

    Регистр.:
    22 июл 2013
    Сообщения:
    32
    Симпатии:
    4
    А пример слайдера можно глянуть? В-принципе если есть функции для переключения слайдов, то просто добавляешь стрелки на сайт (в html) и вешаешь на эти блоки обработчик onClick. Функцию смены картинки заимствуешь из имеющихся, нужно только добавить переход в обратную сторону (текущий слайд - 1).
     
  3. EldarX

    EldarX Писатель

    Регистр.:
    8 авг 2013
    Сообщения:
    4
    Симпатии:
    0
    Функция чтобы показывать слайды есть "function showPics(index)" осталось передать индекс +1 и -1 тоесть можно создать 2 функции с парамитрами index++ и index-- и повесить их на кнопки