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

同页面多个轮播图特效

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

相关文章

  • 同页面多个轮播图特效

    function vend_shop_block(vend_id){ $("#page-bn-"+vend_id)...

  • 微信小程序从零开始开发步骤(五)轮播图

    上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播。 Swiper是滑动特效...

  • BannerView-无限轮播图控件

    轮播图控件,封装ViewPager,支持无限循环轮播,支持三种常用页面特效,支持设置指示器,支持自动切换手动滑动和...

  • 多轮播图的设计

    列表展示多个轮播图 多个轮播图同时显示 多个轮播图不定时进行轮播动画 对应呈现的关系:1个TableView、一个...

  • 第五周学习内容

    焦点图轮播特效之原理、焦点图轮播样式之布局、焦点图轮播之箭头切换、焦点图轮播之无限滚动。 js简介、用法、输出。

  • 用vue实现一个轮播图slider

    轮播图是前端很常用的一个网页特效,几乎所有的网站或多或少都会用到这个特效.轮播图的插件也有很多,用jQuery写起...

  • 关于呼吸轮播图

    轮播图这厮是我们浏览网页时常见的一种形式。而相较传统的轮播图而言,呼吸轮播图具有更美观,更cool,更多特效。因而...

  • 2018-03-09

    UICollectionView在一个页面中,既有轮播图 又有UICollectionView时,需要点击轮播图 ...

  • 原生JS轮播图

    :轮播图 1:页面 2:CSS 3:Js

  • h5页面中有定时器的时候,轮播图不滚动

    (1)轮播图 react-slick 的使用,但是页面中有其他定时器的时候,轮播图不滚动npm install ...

网友评论

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

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