一个让图片平滑移动的js小代码

/**
         * @param _speed 图片移动速度
         * @param _slide 滑块主体
         * @param _slide_ul 滑块列表
         * @param _slide_total 图片列表本体
         * @param _slide_left 图片列表左
         * @param _slide_left 图片列表右
         */
        var _speed=35;
        var _slide = $("#slide");
        var _slide_ul = $("#slide_ul");
        var _slide_total = $("#slide_total");
        var _slide_left = $("#slide_left");
        var _slide_right = $("#slide_right");
        if(_slide.width() > _slide_left.width()){
            _slide_ul.html(_slide_ul.html() + _slide_ul.html());
        }
        _slide_right.html(_slide_left.html());
        var a  = 0;


        /**
         * @description 滑动方法
         */
        function Marquee(){
            /**
             * @description 判断_slide到左侧距离,如果距离大于_slide_left的宽度,则移动到_slide的起始处,否则将_slide向左滑动1px。
             */
            if(_slide.scrollLeft() >= _slide_left.width()){
                _slide.scrollLeft(0);
            }else{
                _slide.scrollLeft(_slide.scrollLeft()+1);
            }
        }


        /**
         * @description 即时调用方法,当页面加载之后立刻执行
         */
        $(function(){
            /**
             * 执行循环任务,每过_speed毫秒执行一次Marquee(滑动)方法
             * @type {number}
             */
            var sliding=setInterval(Marquee,_speed);
            /**
             * @description 当鼠标悬停于图片上,去除循环任务,移开再次启动循环任务。
             */
            _slide.hover(function() {
                clearInterval(sliding);
            },function(){
                sliding=setInterval(Marquee,_speed);
            });
        });

猜你喜欢

转载自blog.csdn.net/ldf_tch/article/details/79278818
今日推荐