美文网首页
同页面多个轮播图特效

同页面多个轮播图特效

作者: Mr丶T | 来源:发表于2019-11-15 16:56 被阅读0次

    <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.移入移出事件取最外层

    相关文章

      网友评论

          本文标题:同页面多个轮播图特效

          本文链接:https://www.haomeiwen.com/subject/vmusictx.html