同时显示（两个、三个、四个...）等以上的轮播图

左手的ㄟ右手 2023-07-17 02:58 6阅读 0赞

源码demo下载地址：  [https://pan.baidu.com/s/11slKHrxtVpX127b3pxeJWg][https_pan.baidu.com_s_11slKHrxtVpX127b3pxeJWg] 提取码: zmx5

话不多说，先上核心代码

css代码：

.main-product1{background: #f8f8f8;width: 1170px;position: absolute;left: 20%;top: 20%;}
    .layui-container{width:1170px}
    .rollBox{width:1170px;overflow:hidden;}
    .rollBox .leftBottom{height: 20px;width: 20px;overflow: hidden;float: left;left: 15px;display: none;margin: 100px 0 0 0;position: absolute;cursor: pointer;text-align: center;background: #afa4a4;border-radius: 20px;}
    .rollBox .rightBottom{right: 0;display: none;height: 20px;width: 20px;overflow: hidden;float: right;right: 15px;margin: 100px 0 0 0;position: absolute;cursor: pointer;text-align: center;background: #afa4a4;border-radius: 20px;}
    .rollBox:hover .leftBottom{display: block}
    .rollBox:hover .rightBottom{display: block;}
    .rollBox .cont{width:1170px;overflow:hidden;float:left;}
    .rollBox .srcCont{width:10000000px;}
    .rollBox .cont .pic{width:390px;float:left;text-align:center;}
    .rollBox .cont .pic img{width:390px;padding: 0 1px;background:#fff;display:block;margin:0 auto;}
    .rollBox .cont .pic p{line-height:26px;color:#505050;}
    .rollBox .cont a:link,.rollBox .cont a:visited{color:#626466;text-decoration:none;}
    .rollBox .cont a:hover{color:#f00;text-decoration:underline;}
    .rollBox #listImg1,.rollBox #listImg2{float:left;}

js代码：

//图片滚动列表 mengjia 070816
                            var speed = 1; //速度(毫秒)
                            var space = 5; //每次移动(px)
                            var pageWidth = 390; //翻页宽度
                            var fill = 0; //整体移位
                            var moveLock = false;
                            var moveTimeObj;
                            var comp = 0;
                            var AutoPlayObj = null;
                            getObj("listImg2").innerHTML = getObj("listImg1").innerHTML;
                            getObj('isCont').scrollLeft = fill;
                            getObj("isCont").onmouseover = function(){
                                clearInterval(AutoPlayObj);
                            }
                            getObj("isCont").onmouseout = function(){
                                autoPlay();
                            }
                            autoPlay();
                            function getObj(objName){
                                if(document.getElementById){
                                    return eval('document.getElementById("'+objName+'")'
                                    )
                                } else{
                                    return eval('document.all.'+objName)
                                }
                            }
                            function autoPlay(){ //自动滚动
                                clearInterval(AutoPlayObj);
                                AutoPlayObj = setInterval('isGoDown();isStopDown();',3000); //间隔时间
                            }
                            function isGoUp(){ //上翻开始
                                if(moveLock) return;
                                clearInterval(AutoPlayObj);
                                moveLock = true;
                                moveTimeObj = setInterval('isSrcUp();',speed);
                            }
                            function isStopUp(){ //上翻停止
                                clearInterval(moveTimeObj);
                                if(getObj('isCont').scrollLeft % pageWidth - fill != 0){
                                    comp = fill - (getObj('isCont').scrollLeft % pageWidth);
                                    compSrc();
                                }else{
                                    moveLock = false;
                                }
                                autoPlay();
                            }
                            function isSrcUp(){ //上翻动作
                                if(getObj('isCont').scrollLeft <= 0){getObj('isCont').scrollLeft = getObj('isCont').scrollLeft + getObj('listImg1').offsetWidth}
                                getObj('isCont').scrollLeft -= space ;
                            }
                            function isGoDown(){ //下翻
                                clearInterval(moveTimeObj);
                                if(moveLock) return;
                                clearInterval(AutoPlayObj);
                                moveLock = true;
                                isSrcDown();
                                moveTimeObj = setInterval('isSrcDown()',speed);
                            }
                            function isStopDown(){ //下翻停止
                                clearInterval(moveTimeObj);
                                if(getObj('isCont').scrollLeft % pageWidth - fill != 0 ){
                                    comp = pageWidth - getObj('isCont').scrollLeft % pageWidth + fill;
                                    compSrc();
                                }else{
                                    moveLock = false;
                                }
                                autoPlay();
                            }
                            function isSrcDown(){ //下翻动作
                                if(getObj('isCont').scrollLeft >= getObj('listImg1').scrollWidth){getObj('isCont').scrollLeft = getObj('isCont').scrollLeft - getObj('listImg1').scrollWidth;}
                                getObj('isCont').scrollLeft += space ;
                            }
                            function compSrc(){
                                var num;
                                if(comp == 0){
                                    moveLock = false;return;
                                }
                                if(comp < 0){ //上翻
                                    if(comp < -space){
                                        comp += space;
                                        num = space;
                                    }else{
                                        num = -comp;
                                        comp = 0;
                                    }
                                    getObj('isCont').scrollLeft -= num;
                                    setTimeout('compSrc()',speed);
                                }else{ //下翻
                                    if(comp > space){
                                        comp -= space;
                                        num = space;
                                    }else{
                                        num = comp;
                                        comp = 0;
                                    }
                                    getObj('isCont').scrollLeft += num;
                                    setTimeout('compSrc()',speed);
                                }
                            }

实际展示效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3dzEwNTY0ODExNjc_size_16_color_FFFFFF_t_70][]

特别注意的是：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3dzEwNTY0ODExNjc_size_16_color_FFFFFF_t_70 1][]

此处的图是我在项目中的实际使用，和demo的稍稍有一些不同，图片都是遍历的，而且只需要遍历一遍，而demo是listImg2里面直接给出了和listImg1一样的数据，此处需要注意。因为这部分的操作是js操作然后复制到listImg2里面了。

源码下载地址：链接: [https://pan.baidu.com/s/11slKHrxtVpX127b3pxeJWg][https_pan.baidu.com_s_11slKHrxtVpX127b3pxeJWg] 提取码: zmx5

[https_pan.baidu.com_s_11slKHrxtVpX127b3pxeJWg]: https://pan.baidu.com/s/11slKHrxtVpX127b3pxeJWg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3dzEwNTY0ODExNjc_size_16_color_FFFFFF_t_70]: /images/20230528/2d0ca5b87ede41e1bad87113b0ce652f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3dzEwNTY0ODExNjc_size_16_color_FFFFFF_t_70 1]: /images/20230528/6a4866e3c0954ec8a270e3f38a36b9a0.png