css实现n张背景图轮播效果

 ###### 问题遇到的现象和发生背景

 ###### 问题相关代码，请勿粘贴截图

 ###### 运行结果及报错内容

 ###### 我的解答思路和尝试过的方法

 ###### 我想要达到的结果

    <div class="container" style="padding-right: 0px; padding-left: 0px;">
        <div id="slide" class="slide" class="index-slide" alt="star" >
            <!-- 轮播图片数量可自行增减 -->
                <div class="img" id="img3"url="" ><a href=""><img src="http://chinawaytek-images.oss-cn-shenzhen.aliyuncs.com/1.jpg"/></a></div>
                <div class="img" id="img2" url=""><a href=""><img src="http://chinawaytek-images.oss-cn-shenzhen.aliyuncs.com/2.jpg"/></a></div>
                <div class="img" id="img1" url=""><a href=""><img src="http://chinawaytek-images.oss-cn-shenzhen.aliyuncs.com/3.jpg"/><a/></div>
                <div class="slide-bt"></div>
        </div>
    </div>
    
    
    <script>
        function change(){
            document.getElementsByTagName('div')[0].className = 'tcshow';
        }
    var autoLb = true;          //autoLb=true为开启自动轮播
    var autoLbtime = 2;         //autoLbtime为轮播间隔时间（单位秒）
    var touch = true;           //touch=true为开启触摸滑动
    var slideBt = false;         //slideBt=true为开启滚动按钮
    var slideNub;               //轮播图片数量
    
    
    
    //窗口大小改变时改变轮播图宽高
    $(window).resize(function(){
    $(".slide").height($(".slide").width()*0.56);
    });
    
    
    $(function(){
    
        var value = sessionStorage.getItem("key");
        if(value==null || value.length<=0){
            sessionStorage.setItem("key", "value");
            $(".tcshow").show();
        }else{
            $(".tcshow").hide();
        }
    
    $('#close').bind('click',function(){
            document.getElementsByTagName('div')[0].className = 'tchide';
        });
    $(".slide").height($(".slide").width()*0.56);
    slideNub = $(".slide .img").size();             //获取轮播图片数量
    for(i=0;i<slideNub;i++){
        $(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
    }
    
    //根据轮播图片数量设定图片位置对应的class
    // 0
    if(slideNub==1){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img3");
            
        }   
    }
    if(slideNub==2){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+3));
           
        }
    }
    if(slideNub==3){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+2));
           
        }
    }
    if(slideNub>3&&slideNub<6){
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").addClass("img"+(i+1));
            $(".container").attr("background-image",$(".slide .img:eq("+i+")").url)
        }
    }
    if(slideNub>=6){
        for(i=0;i<slideNub;i++){
            if(i<5){
               $(".slide .img:eq("+i+")").addClass("img"+(i+1)); 
            }else{
                $(".slide .img:eq("+i+")").addClass("img5"); 
            }
        }
    }
    

    
    //自动轮播
    if(autoLb){
        setInterval(function(){
        right();
    }, autoLbtime*2000);
    }
    
    
    if(touch){
        k_touch();
    }
    slideLi();
    imgClickFy();
    })
    
    //右滑动
    function right(){
    var fy = new Array();
    for(i=0;i<slideNub;i++){
        fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
    }
    for(i=0;i<slideNub;i++){
        if(i==0){
            $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
        }else{
           $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]); 
        }
    }
    imgClickFy();
    slideLi();
    }
    
    //左滑动
    function left(){
    var fy = new Array();
    for(i=0;i<slideNub;i++){
        fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
    }
    for(i=0;i<slideNub;i++){
        if(i==(slideNub-1)){
            $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
        }else{
           $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]); 
        }
    }
    imgClickFy();
    slideLi();
    }
<script>
```javascript

```javascript

好用的话点个采纳