自动循环播放产品列表（横向）

酱油ooo-

已于 2022-03-25 09:51:46 修改

阅读量140

点赞数

文章标签：前端 jquery

于 2022-03-21 15:40:53 首次发布

本文链接：https://blog.csdn.net/Ricale/article/details/123636852

版权

html

<div class="productList"> // 相对定位
    <div class="productListItem productInfo1" id="productListItem"> </div> // 绝对定位
    <div class="productListItem productInfo2" id="productListItem"> </div> // 绝对定位
</div>

        autoScroll() {
                let proLeft=0 // productInfo1的left
                let proLeft_=1825 // productInfo2的left(产品列表总共宽度,为了保证productInfo2在productInfo1的后面紧跟着)

                this.proTimer=setInterval(function(){
                    proLeft+=-1;   // 每0.01秒向左移动的距离
                    proLeft_+=-1;  // 每0.01秒向左移动的距离
                    if(proLeft<=-1825){
                        proLeft=1825  // 当productInfo1完全移出容器左边外后重新移动到productInfo2的右边
                    }
                    if(proLeft_<=-1825){
                        proLeft_=1825 // 当productInfo2完全移出容器左边外后重新移动到productInfo1的右边
                    }
                    $(".productCenter-container .productInfo1").css('left',proLeft)   
                    $(".productCenter-container .productInfo1_").css('left',proLeft_)
                },10)
            },

基于jqury实现的其他语言实现的话更改这一部分改变left值的方法即可