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

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

话不多说，先上核心代码

<div class="main-product1 clearBoth">
        <div class="layui-container">
            <!-- 轮播图 -->
            <div class="overflowHidden gameBanner">
                <div class="footerBoxSecond">
                    <div class="rollBox">
                        <div class="leftBottom" onmousedown="isGoUp()" onmouseup="isStopUp()" onmouseout="isStopUp()"><b><</b></div>
                        <div class="cont" id="isCont">
                            <div class="srcCont">
                                <div id="listImg1">
                                    <!-- 图片列表 begin -->
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/1.gif" width="390"></a>
                                    </div>
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/2.gif" width="390"></a>
                                    </div>
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/3.gif" width="390"></a>
                                    </div>
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/4.gif" width="390"></a>
                                    </div>
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/5.gif" width="390"></a>
                                    </div>
									<div class="pic">
                                        <a href="#" target="_self"><img src="img/6.gif" width="390"></a>
                                    </div>
									<div class="pic">
                                        <a href="#" target="_self"><img src="img/7.gif" width="390"></a>
                                    </div>
									<div class="pic">
                                        <a href="#" target="_self"><img src="img/8.gif" width="390"></a>
                                    </div>
                                    <!-- 图片列表 end -->
                                </div>
                                <div id="listImg2">
                                    <!-- 图片列表 begin -->
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/1.gif" width="390"></a>
                                    </div>
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/2.gif" width="390"></a>
                                    </div>
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/3.gif" width="390"></a>
                                    </div>
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/4.gif" width="390"></a>
                                    </div>
                                    <div class="pic">
                                        <a href="#" target="_self"><img src="img/5.gif" width="390"></a>
                                    </div>
									<div class="pic">
                                        <a href="#" target="_self"><img src="img/6.gif" width="390"></a>
                                    </div>
									<div class="pic">
                                        <a href="#" target="_self"><img src="img/7.gif" width="390"></a>
                                    </div>
									<div class="pic">
                                        <a href="#" target="_self"><img src="img/8.gif" width="390"></a>
                                    </div>
                                    <!-- 图片列表 end -->
                                </div>
                            </div>
                        </div>
                        <div class="rightBottom" onmousedown="isGoDown()" onmouseup="isStopDown()" onmouseout="isStopDown()"><b>></b></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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);
                            }
                        }

实际展示效果图：

特别注意的是：

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

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