小編給大家分享一下html5+css怎么實現中間大兩頭小的輪播效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

國際慣例，先上效果

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;
}
.boxli{
width:20%;
float:left;
list-style:none;
-webkit-transition:width0.5s,height0.5s,margin0.5s;
position:relative;
}
.boxvideo{
width:100%;
height:100%;
}
.boxlidiv{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.boxlidivimg{
width:100%;
height:100%;
}
/*.boxli:nth-child(2){
height:360px;
margin:01%;
}*/
.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%;
}
.boxli>p{
margin:0;
color:#fff;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}
.boxli>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:

<divclass="wrap">

<divclass="container">
<ulclass="box">
<liclass="video1">
<video></video>
<div><imgsrc="3.jpg"alt="">1</div>
</li>
<liclass="video2">
<video></video>
<div><imgsrc="3.jpg"alt="">2</div>
</li>
<liclass="video3">
<video></video>
<div><imgsrc="3.jpg"alt="">3</div>
</li>
<liclass="video4">
<video></video>
<div><imgsrc="3.jpg"alt="">4</div>
</li>
</ul>
<buttononclick="moveRight()"class="goLeftbtn">左</button>
<buttononclick="moveLeft()"class="goRightbtn">右</button>
</div>
<divclass="ddd">
<divclass="dd-2"><divclass="aa">aaa</div><divclass="bb">vvvv</div></div>
</div>
</div>

js:

$(function(){
$('.box>li:nth(1)').css({width:'36%',margin:'02%'})
$('.box>li:nth(1)').append('視頻主題')

})
$(window).resize(function(){//當瀏覽器大小變化時
$('.box').css('height','auto')
})
functionmoveLeft(){
varheight=$('.box>li:nth(1)').height()
$('.box').css('height',height)
$('.box>li').css({width:'20%',margin:'00%'})
$('.box>li:nth(2)').css({width:'36%',margin:'02%'})
$('.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('視頻主題')

});
}
functionmoveRight(){
$('.box>li').css({width:'20%',margin:'00%'})
$('.box>li:nth(0)').css({width:'36%',margin:'02%'})
varheight=$('.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('視頻主題')
});
}

總結

以上是生活随笔為你收集整理的html5+css怎么实现中间大两头小的轮播效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。