轮播图

html:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/index.css">
    <title>Document</title>
</head>
<body>
    <div class="banner">
        <span class="previouspage"> < </span>
        <span class="nextpage"> > </span>
        <div class="child1"><img src="/images/123.png" alt=""></div>
        <div class="child2"><img src="/images/2020-12-05-15-42-13_0.png" alt=""></div>
        <div class="child3"><img src="/images/sd.png" alt=""></div>
    </div>
    
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/index.js"></script>
</body>

css:

*{
    margin: 0;
    padding: 0;
    transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
}
body{
    overflow: hidden;
}
.banner{
    height: 400px;
    background-color: #666666;
    position: relative;
}
.child1{
    position: absolute;
    display: block;
    width: 600px;
    height: 300px;
    opacity: 1;
    top: 50px;
    /* 居中 */
    left: calc(50% - 300px);
    z-index: 999;
}
.child1 img{
    width: 100%;
    height: 100%;
}
.child2 img{
    width: 100%;
    height: 100%;
}
.child3 img{
    width: 100%;
    height: 100%;
}
.child2{
    position: absolute;
    display: block;
    opacity:0.5;
    width: 400px;
    height: 200px;
    top: 100px;
    left: 200px;
}
.child3{
    position: absolute;
    display: block;
    opacity:0.5;
    width: 400px;
    height: 200px;
    top: 100px;
    left: calc(100% - 600px);
}
.banner span {
    position: absolute;
    color: white;
    background: rgba(125,125,120,.3);
    width: 50px;
    height: 80px;
    top: 50%;
    font-family: "宋体";
    line-height: 80px;
    font-size: 60px;
    margin-top: -40px;
    text-align: center;
    cursor: pointer;
}
.banner span:hover{
    background: rgba(125,125,120,.8);
}
.banner .previouspage{
    left: 50px;
}
.banner .nextpage{
    right: 50px;
}

js:

$(function(){
    // 图片在不同区域显示不同效果
    function Banner(s1,s2,s3) {
        // 左边图
        $(s1).css({"opacity":"0.5","width":"400px","height":"200px","top":"100px","left":"200px","z-index":"1"});
        // 右边图
        $(s2).css({"opacity":"0.5","width":"400px","height":"200px","top":"100px","left":"calc(100% - 600px)","z-index":"1"});
        // 中间图
        $(s3).css({"opacity":"1","width":"600px","height":"300px","top":"50px","left":"calc(50% - 300px)","z-index":"999"});
    }
    var i=3;
    var str=".banner .child";
    $(".banner .previouspage").click(function(){
        switch(i){
            case 1:
                Banner(str+(i+2),str+i,str+(i+1));
                break;
            case 2:
                Banner(str+i,str+(i+1),str+(i-1));
                break;
            case 3:
                Banner(str+(i-2),str+(i-1),str+i);
                break;
            default:
                break;
        }
        i++;
        if(i>3){
            i=1;
        }
    });
})

　效果:

posted @ 2020-12-12 17:44  小白fox  阅读(105)  评论(0)    收藏  举报