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

th7

Постоялец
Регистрация
21 Апр 2008
Сообщения
119
Реакции
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");
    }
});

Как внедрить стрелки влево вправо???
 
А пример слайдера можно глянуть? В-принципе если есть функции для переключения слайдов, то просто добавляешь стрелки на сайт (в html) и вешаешь на эти блоки обработчик onClick. Функцию смены картинки заимствуешь из имеющихся, нужно только добавить переход в обратную сторону (текущий слайд - 1).
 
Функция чтобы показывать слайды есть "function showPics(index)" осталось передать индекс +1 и -1 тоесть можно создать 2 функции с парамитрами index++ и index-- и повесить их на кнопки
 
Назад
Сверху