3D轮播图

头像
江文艺
    阅读 6 分钟
    3

    轮播图

    随着时代的发展
    各种各样的banner轮播图
    下面要介绍的是一种3D轮播图
    与以往轮播图不同的是中间那块banner凸起
    下面请看效果图与代码

    1.效果图

    clipboard.png

    2.HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <style>
        body{background-color: #2c3e50}
        *{
            padding: 0;
            margin: 0;
        }
        .container{
            max-width: 800px;
            margin: 0 auto;
        }
        .slide{
            width: 100%;
            min-height: 180px;
            overflow: hidden;
            position: relative;
  
        }
        .slide .img{
            overflow: hidden;
            position: absolute;
            transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
        }
        .slide .img img{
            width: calc(100% - 14px);
            height: calc(100% - 14px);
            margin: 7px;
            box-shadow: 0 0 5px #000;
        }
        .slide .img1{
            width: 40%;
            height: 40%;
            top: 30%;
            left: -50%;
            z-index: 1;
        }
        .slide .img2{
            width: 60%;
            height: 60%;
            top: 20%;
            left: -53%;
            z-index: 2;
        }
        .slide .img3{
            width: 85%;
            height: 90%;
            top: 6%;
            left: 8%;
            z-index: 3;
        }
        .slide .img4{
            width: 60%;
            height: 60%;
            top: 20%;
            left: 93%;
            z-index: 2;
        }
        .slide .img5{
            width: 40%;
            height: 40%;
            top: 30%;
            left: 110%;
            z-index: 1;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="slide" class="slide" class="index-slide" alt="star">
        <!-- 轮播图片数量可自行增减 -->
        <a href="javascript:void(0)" class="img"><img src="image/carousel.png"/></a>
        <a href="javascript:void(0)" class="img"><img src="image/1.png"/></a>
        <a href="javascript:void(0)" class="img"><img src="image/2.png"/></a>
    </div>
</div>

<script>
var autoLb = false;          //autoLb=true为开启自动轮播
var autoLbtime = 1;         //autoLbtime为轮播间隔时间（单位秒）
var touch = true;           //touch=true为开启触摸滑动
var slideBt = true;         //slideBt=true为开启滚动按钮


var slideNub;               //轮播图片数量

//窗口大小改变时改变轮播图宽高
$(window).resize(function(){
   $(".slide").height($(".slide").width()*0.56);
});


$(function(){
    $(".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
    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(autoLb){
        setInterval(function(){
        right();
    }, autoLbtime*1000);
    }


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


//轮播图片左右图片点击翻页
function imgClickFy(){
    $(".slide .img").removeAttr("onclick");
    $(".slide .img2").attr("onclick","left()");
    $(".slide .img4").attr("onclick","right()");
}


//修改当前最中间图片对应按钮选中状态
function slideLi(){
    var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
}


//轮播按钮点击翻页
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);
        }
    }
    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>
</body>
</html>

    3.image

    carousel.png
    clipboard.png

    html
    江文艺
    1k 声望67 粉丝
    « 上一篇
    box-shadow常用技巧总结
    下一篇 »
    2018 浅谈前端面试那些事

    引用和评论

    推荐阅读
    头像
    前端那些事九（VUE）

    江文艺阅读 1.3k

    头像
    前端开发工具

    寒青赞 19阅读 5.3k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.9k评论 3

    头像
    面向企业级前端应用的开发框架 UI5 的发展简史介绍

    注销赞 5阅读 7.8k

    头像
    html如何实现跳转到锚点

    大发明家赞 2阅读 4.4k

    头像
    这些年

    注销赞 2阅读 4.1k

    头像
    一个用JavaScript生成思维导图(mindmap)的github repo

    注销赞 1阅读 6.3k

    0 条评论
    得票最新