同時顯示（兩個、三個、四個...）等以上的輪播圖

源碼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" οnmοusedοwn="isGoUp()" οnmοuseup="isStopUp()" οnmοuseοut="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" οnmοusedοwn="isGoDown()" οnmοuseup="isStopDown()" οnmοuseοut="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