html5+css如何实现中间大两头小的轮播效果

前端  /  管理员 发布于 7年前   238

国际惯例，先上效果

好了，话不多说，上去就是一顿撸。

css:

<style>   *{margin: 0;padding: 0}   .wrap{          }   .container{       width: 100%;       overflow: hidden;       /* height: 400px; */       background: red;       position: relative;   }   .box{width: 125%;       height: auto;       display: flex;        align-items: center;        position: relative;        left: 0;       }    .box li{        width: 20%;        float: left;        list-style: none;        -webkit-transition: width 0.5s, height 0.5s, margin 0.5s;        position: relative;    }    .box video {        width: 100%;        height: 100%;    }    .box li div {        position: absolute;        top: 0;        bottom: 0;        left: 0;        right: 0;    }    .box li div img {        width: 100%;        height: 100%;    }    /* .box li:nth-child(2){        height: 360px;        margin: 0 1%;    } */    .goLeft, .goRight {        position: absolute;        width: 28px;        height: 52px;        top: 50%;        transform: translate(0,-50%);        cursor: pointer;        border: none;        outline: none;        line-height: 52px;    }    .goLeft {        left: 20%;    }    .goRight {        right: 20%;    }    .box li>p {        margin: 0;        color: #fff;        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%,-50%);        text-align: center;    }    .box li>p>span {        display: inline-block;        width: 100px;        height: 100px;        background: url(play.png);    }    .ddd{        width: 100%;        height: 360px;        display: flex;align-items: center;position: relative;    }    .dd-2{        width: 20%;        background: yellow;    }    .aa{        width: 100%;    }</style>

html:

<div class="wrap">    <div class="container">        <ul class="box"><li class="video1">    <video></video>    <div><img src="3.jpg" alt="">1</div></li><li class="video2">    <video></video>    <div><img src="3.jpg" alt="">2</div></li><li class="video3">    <video></video>    <div><img src="3.jpg" alt="">3</div></li><li class="video4">    <video></video>    <div><img src="3.jpg" alt="">4</div></li>        </ul>        <button onclick="moveRight()" class="goLeft btn">左</button>         <button onclick="moveLeft()" class="goRight btn">右</button>    </div>    <div class="ddd">        <div class="dd-2"><div class="aa">aaa</div><div class="bb">vvvv</div></div>    </div></div>

js:

$(function(){    $('.box>li:nth(1)').css({ width: '36%', margin: '0 2%' })    $('.box>li:nth(1)').append('视频主题')    })$(window).resize(function () {          //当浏览器大小变化时    $('.box').css('height', 'auto')})function moveLeft(){        var height = $('.box>li:nth(1)').height()        $('.box').css('height', height)        $('.box>li').css({ width: '20%', margin: '0 0%' })        $('.box>li:nth(2)').css({ width: '36%', margin: '0 2%' })        $('.box').animate({left: '-25%'        }, 400, function () {// 把第一个子元素移到最后，并且设置left=0$(".box").append($('.box>li:nth(0)')[0]);$(".dd-2").append($('.aa')[0]);$(".aa").append('ccc');$('.box').css('left', 0);$(".btn").attr("disabled", false);$('.box>li:nth(1)').append('视频主题')        });    }    function moveRight(){        $('.box>li').css({ width: '20%', margin: '0 0%' })        $('.box>li:nth(0)').css({ width: '36%', margin: '0 2%' })        var height = $('.box>li:nth(1)').height()        $('.box').css('height', height)        $(".box").prepend($('.box>li:nth(3)')[0]);    $('.box').css('left', '-20%');        $('.box').animate({left: 0        }, 400, function () {$(".btn").attr("disabled", false);$('.box>li:nth(1)').append('视频主题')        });    }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。