Jquery图像滚动条慢而生涩

时间:2016-05-12 20:07:15

标签: javascript jquery html

所以我用底部的小缩略图构建了这个图像滚动条,我希望缩略图在您将鼠标悬停在指定区域时左右滚动,并在最后一个进入视图时停止(与第一个相同)对于另一个方向)我提出的代码在页面上工作了一段时间,但过了一段时间它开始变得缓慢和生涩,所以我想知道是否有更简洁的方法来完成同样的事情。

代码是:

var licount = $('.hs_cos_flex-slides-thumb li').length; //counts rows in list
var thumbwidth = licount * 210; //gets width of all rows
var viewwidth = $(".hs-cos-flex-slider-control-panel").width(); //gets width of sarounding div
var scrollwidth = thumbwidth - viewwidth; //gets width where last row is visible

var intervalId = window.setInterval;

$( ".thumb-for" ).hover(
    function() {
        var scrollposition = $(".hs_cos_flex-slides-thumb").position().left; //calculates how far left it has moved
        var absposition = Math.abs(scrollposition); //gets absolute value of left movement
        var shover = true;

    if ( scrollwidth > (absposition + 209) ){  

            $('.hs_cos_flex-slides-thumb').animate({
                right: '+=210px'
            }, 1500, 'linear');
            absposition+=210;
        }

    intervalId = window.setInterval(moveticker, 1500)

    function moveticker() {


        if ( scrollwidth > (absposition + 209) ){  

            $('.hs_cos_flex-slides-thumb').animate({
                right: '+=210px'
            }, 1500, 'linear');
            absposition+=210;
        }



    };


}, function() {

    window.clearInterval(intervalId);

  }
);


$( ".thumb-back" ).hover(
    function() {
        var scrollposition = $(".hs_cos_flex-slides-thumb").position().left; //calculates how far left it has moved
        var absposition = Math.abs(scrollposition); //gets absolute value of left movement
        var shover = true;

    if ( scrollposition < 0 ){  

            $('.hs_cos_flex-slides-thumb').animate({
                right: '-=210px'
            }, 1500, 'linear');
            scrollposition+=210;
        }

    intervalId = window.setInterval(moveticker, 1500)

    function moveticker() {


        if ( scrollposition < 0 ){  

            $('.hs_cos_flex-slides-thumb').animate({
                right: '-=210px'
            }, 1500, 'linear');
            scrollposition+=210;
        }



    };


}, function() {

    window.clearInterval(intervalId);

  }
);

0 个答案:

没有答案