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;
}
.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;
html5轮播图代码效果图}
.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('视频主题')
});
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。