JavaScript实现两组图片的轮播效果

JavaScript实现两组图片的轮播效果

前端新人 第一次写博客 多多指教

图片轮播功能：

1. 点击图片上的左右箭头切换图片。
2. 点击上一组或下一组的按钮同时控制图片的切换；
3. 图片的循环切换；

HTML代码

<button>上一组</button>
        <button>下一组</button>
        <br><br>
    <div class="wrap">
         <a class="pre" href="#">></a>
        <a class="next" href="#"><</a>
        <img src="images/22.jpg">
        <p>图片正在加载.....</p>
        <span>数据正在计算....</span>
        
    </div>
    <div class="wrap">
        <a class="pre" href="#">></a>
        <a class="next" href="#"><</a>
        <img src="images/11.jpg">
        <p>图片正在加载.....</p>
        <span>数据正在计算....</span>
    </div>

CSS样式

 <style>
    p{
        margin:0;
        padding:0;
    }
    .wrap{
        width:600px;
        height:360px;
        position: relative;
        margin:0 auto;
        background:#333;
        float:left;
        margin-right: 40px;
    }
    img{
        width:600px;
        height:360px
    }
    a{
        text-decoration: none;
        position:absolute;
        font-size: 40px;
        color:#fff;
        top:50%;
        margin-top:-20px;
     }
     .pre{
         right:0;
     }
     .next{
         left:0;
     }
    p{
        position:absolute; 
        left: 50%;
        bottom:18px;
        margin-left: -50px;
    }
    span{
        position:absolute; 
        left: 50%;
        margin-left: -50px;
        top:20px;
    }
    </style>

JS代码

<script>
            var a=document.getElementsByTagName("a"),
                img=document.getElementsByTagName("img"),
                oP=document.getElementsByTagName("p"),
                span=document.getElementsByTagName("span"),
                btn=document.getElementsByTagName("button");
        
            var  arrImg=['images/11.jpg','images/22.jpg','images/33.jpg','images/44.jpg','images/55.jpg'];
            var  arrImgs=['images/66.jpg','images/77.jpg','images/88.jpg','images/99.jpg','images/131.jpg','images/121.jpg'];
            var arrTitle=['第一张图片','第二张图片','第三张图片','第四张图片','第五张图片'];
            var arrTitles=['第一张图片','第二张图片','第三张图片','第四张图片','第五张图片','第六张图片'];
            var num=0;
            var sum=0;
                img[0].src=arrImg[0];
                img[1].src=arrImgs[1];

                function fn(){
                    img[0].src=arrImg[num];
                    oP[0].innerHTML=arrTitle[num];
                    span[0].innerHTML=num+1+"/"+[arrImg.length];
                }
                fn();

                function fns(){
                    img[1].src=arrImgs[sum];
                    oP[1].innerHTML=arrTitles[sum];
                    span[1].innerHTML=sum+1+"/"+[arrImgs.length];
                }
                fns();
        
                a[0].onclick=function(){
                    num++;
                    if(num==arrImg.length){
                        num=0;
                    }
                    fn();
                }
                a[1].onclick=function(){
                    num--;
                    if(num<0){
                        num=arrImg.length-1;
                    }
                    fn();
                }
                a[2].onclick=function(){
                    sum++;
                    if(sum==arrImgs.length){
                        sum=0;
                    }
                    fns();
                }
                a[3].onclick=function(){
                    sum--;
                    if(sum<0){
                        sum=arrImgs.length-1;
                    }
                    fns();
                }
                btn[0].onclick=function(){
                    num--;
                    if(num<0){
                        num=arrImg.length-1;
                    }
                    fn();
                    sum--;
                    if(sum<0){
                        sum=arrImgs.length-1;
                    }
                    fns();
                }
                btn[1].onclick=function(){
                    num++;
                    if(num==arrImg.length){
                        num=0;
                    }
                    fn();
                    sum++;
                    if(sum==arrImgs.length){
                        sum=0;
                    }
                    fns();
                }
                
            </script>