同页面多个轮播图特效

2019-11-15  本文已影响0人  Mr丶T

<script language="JavaScript" type="text/javascript">

        function vend_shop_block(vend_id){

            $("#page-bn-"+vend_id).show();

            $("#page-bs-"+vend_id).show();

        }

        function vend_shop_hide(vend_id){

            $("#page-bn-"+vend_id).hide();

            $("#page-bs-"+vend_id).hide();

        }

        /*btnMode*/

        function SJ_scroll1(wraper, prev, next, img, speed, or, id) {

            var wraper = $(wraper);

            var prev = $(prev);

            var next = $(next);

            var img = $(img).find('.shop-products-info-'+id);

            var w = img.find('.one-product').outerWidth(true);

            var s = speed;

            next.click(function() {

                img.animate({

                'margin-left': -w

            }, function() {

                img.find('.one-product:first').appendTo(img);

                img.css({

                    'margin-left':  -w

                });

            });

        });

        prev.click(function() {

            img.find('.one-product:last').prependTo(img);

            img.css({

                'margin-left': -w

            });

            img.animate({

                'margin-left': -w

            });

        });

        if(or == true) {

            ad = setInterval(function() {

                next.click();

            }, s * 2000);

            wraper.hover(

                function() {

                    clearInterval(ad);

            },

        function() {

            ad = setInterval(function() {

                next.click();

            }, s * 2000);

        });

    }

}

SJ_scroll1('.shop-products', '#page-bn-'+{$vend.vend_id}, '#page-bs-'+{$vend.vend_id}, '.shop-products-container-'+{$vend.vend_id}, 1, false, {$vend.vend_id}); // true为自动播放,不加此参数或false就默认不自动

</script>

注:1.多个轮播图js放入遍历内容里面

2.通过唯一id区分

3.移入移出事件取最外层

上一篇下一篇

猜你喜欢

热点阅读