JQuery слайдер с паузой при наведении - PullRequest
Новая
       12

JQuery слайдер с паузой при наведении

0 голосов
/ 28 марта 2012

Во-первых, я хочу сказать, что я действительно написал множество похожих уроков / руководств и других материалов, но ни один из них не помог.Я хотел сделать как можно более простой слайдер, и я думаю, что у меня хороший способ сделать это.Во время создания слайдера я столкнулся с двумя проблемами, которые я не знаю, как исправить.Я сделал демонстрацию своей проблемы здесь http://jsfiddle.net/FJrqS/1/

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

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

Заранее большое спасибо

1 Ответ

1 голос
/ 28 марта 2012

Привет, надеюсь, это полезно демо: http://jsfiddle.net/FJrqS/38/

Пожалуйста, дайте мне знать, помогает это или нет;иначе я удалю свой пост.(Снимаю шляпу перед вами, если вы пишете полный плагин в стиле eye-candy:))

1) Скольжение, поскольку вы используете положение пикселя для скольжения leftpos - это то, что вызываетнебольшая медлительность Я внес в нее небольшое изменение, и поведение кажется немного лучше, чем раньше, вы можете поиграть.

2) Вы можете использовать наведение мыши и наведение мыши для начала иостановка цикла.(Но будет много других событий, которые вы, вероятно, захотите связать, если будете писать плагин)

для hover вы можете изменить .mouseover на .hover, но .mouseover должен сработать.

Код JQuery ниже 

$(document).ready(function(){

loop();
function loop(){
    var sliderRwidth = ($('#sliderR li').length)*200;
    var leftpos =(($('#sliderR li').length))-70; 
    var rightpos = (($('#sliderR li').length)*200)-1000; 
    var speed =  5000;

$("#sliderR").css('width',sliderRwidth+'px');

$("#sliderR").animate({'left':leftpos+'px'},speed
,function() {
$("#sliderR").animate({'left':-rightpos+'px'},speed
,function(){loop();

        })
    });



}
    //On mouseover stop the slider
    $("#sliderR").mouseover(function() { 
        $(this).stop();
        return false;
    }); 

     //On mouseout start the slider
     $("#sliderR").mouseout(function() { 
        loop();
    }); 

});​

Надеюсь, это поможет, ура!

...