移动端轮播图-蒲公英云

在这里插入图片描述

<link type="text/css" href="https://img1.tiancitycdn.com/mobile/mhyh/homepage/20170516/css/jquery.bxslider.css">
<script>
  window.use_screen_base = '750';
</script>
<div id="slide" class="slide" class="index-slide" alt="star">
    <!-- 轮播图片数量可自行增减 -->
    <div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/cs0724ld/images2/sp_1.jpg"/></div>
    <div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/cs0724ld/images2/sp_2.jpg"/></div>
    <div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/cs0724ld/images2/sp_3.jpg"/></div>
    <div class="img"><img src="https://img1.tiancitycdn.com/cls/event/2020/cs0724ld/images2/sp_4.jpg"/></div>
    <div class="slide-bt" style="display: none;"></div>
    <a href="javascript:;" class="a_left" onclick="left()"></a>
    <a href="javascript:;" class="a_right" onclick="right()"></a>
</div>
<script src="https://img1.tiancitycdn.com/mobile/yzgj/event/2016/20161227/m/js/jquery-1.7.2.min.js"></script>
<script src="https://img1.tiancitycdn.com/mobile/yzgj/event/2016/20161227/m/js/rem_screen.js"></script>
<script src="https://img1.tiancitycdn.com/mobile/yzgj/event/2016/20161227/m/js/common-1.2.2.min.js"></script>
<script src="https://img1.tiancitycdn.com/mobile/mhyh/homepage/20170516/js/jquery.bxslider.js"></script>
<script src="https://img1.tiancitycdn.com/project1/csol/event/2019/10/cs191021sale/js/dialog.min.js"></script>
<script src="https://img1.tiancitycdn.com/k1/2016/sign/js/newlawyer.js"></script>
<style type="text/css">
/*特色滑动*/
.slide{ width:100%;min-height:4rem;overflow:hidden;position:relative;top:0rem;left:0;}
.slide .img{ overflow:hidden;position:absolute;transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s; -moz-transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s; -webkit-transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s; -o-transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s; -ms-transition:width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;text-align:center;}
.slide .img img{ width:100%;}
.slide .img1 { width:40%;height:40%;top:30%;left:-40%;z-index:1;opacity:0.1; background-size:40% 40%;}
.slide .img2 { width:60%;height:72%;top:12%;left:-50%;z-index:2;opacity:0.6; background-size:60% 72%;}
.slide .img3 { width:80%;height:100%;top:0;left:10%;z-index:3; background-size:80% 100%;}
.slide .img4 { width:60%;height:72%;top:12%;left:90%;z-index:2;opacity:0.6; background-size:60% 72%;}
.slide .img5 { width:40%;height:40%;top:30%;left:100%;z-index:1;opacity:0.1; background-size:40% 40%;}
*{ box-shadow:0px 0px 0px 1px #fff;}
</style>
<script>
$(function(){ 
    //特色滑动
    $(".slide").height($(".slide").width()*0.1);
    slideNub = $(".slide .img").size();             //获取轮播图片数量
    for(i=0;i<slideNub;i++){ 
        $(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
    }
    //根据轮播图片数量设定图片位置对应的class
    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));
        }
    }
    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(slideBt){ 
        for(i=1;i<=slideNub;i++){ 
            $(".slide-bt").append("<span data-slide-bt='"+i+"' οnclick='tz("+i+")'></span>");
        }
        $(".slide-bt").width(slideNub*34);
        $(".slide-bt").css("margin-left","-"+slideNub*17+"px");
    }
    //自动轮播
    if(autoLb){ 
        setInterval(function(){ 
            right();
        }, autoLbtime*1000);
    }
    if(touch){ 
        k_touch();
    }
    slideLi();
    imgClickFy();
});
var autoLb = false;          //autoLb=true为开启自动轮播
var autoLbtime = 2;         //autoLbtime为轮播间隔时间（单位秒）
var touch = true;           //touch=true为开启触摸滑动
var slideBt = true;         //slideBt=true为开启滚动按钮
var slideNub;               //轮播图片数量
//窗口大小改变时改变轮播图宽高
$(window).resize(function(){ 
   $(".slide").height($(".slide").width()*0.56);
});
//右滑动
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();
}
//轮播图片左右图片点击翻页
function imgClickFy(){ 
    $(".slide .img").removeAttr("onclick");
    $(".slide .img2").attr("onclick","left()");
    $(".slide .img4").attr("onclick","right()");
    var n = $('.slide-bt span.on').attr('data-slide-bt') - 1;
    $('#slide div.img').addClass('opacity');
    $('#slide div.img:eq('+ n +')').removeClass('opacity');
}
//修改当前最中间图片对应按钮选中状态
function slideLi(){ 
    var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
    $(".slide-bt span").removeClass("on");
    $(".slide-bt span[data-slide-bt="+slideList+"]").addClass("on");
    var n = $('.slide-bt span.on').attr('data-slide-bt') - 1;
    $('#slide div.img').addClass('opacity');
    $('#slide div.img:eq('+ n +')').removeClass('opacity');
}
//轮播按钮点击翻页
function tz(id){ 
    var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
    if(tzcs>0){ 
        for(i=0;i<tzcs;i++){ 
            setTimeout(function(){ 
              right();
            },1);2
        }
    }
    if(tzcs<0){ 
        tzcs=(-tzcs);
        for(i=0;i<tzcs;i++){ 
            setTimeout(function(){ 
              left();
            },1);
        }
    }
    slideLi();
}
//触摸滑动模块
function k_touch() { 
    var _start = 0, _end = 0, _content = document.getElementById("slide");
    _content.addEventListener("touchstart", touchStart, false);
    _content.addEventListener("touchmove", touchMove, false);
    _content.addEventListener("touchend", touchEnd, false);
    function touchStart(event) { 
        var touch = event.targetTouches[0];
        _start = touch.pageX;
    }
    function touchMove(event) { 
        var touch = event.targetTouches[0];
        _end = (_start - touch.pageX);
    }
    function touchEnd(event) { 
        if (_end < -100) { 
            left();
            _end=0;
        }else if(_end > 100){ 
            right();
            _end=0;
        }
    }
}
</script>