國際慣例，先上效果
好了，話不多說，上去就是一頓擼。
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 () { //當(dāng)瀏覽器大小變化時(shí)
$('.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 () {
// 把第一個(gè)子元素移到最后，并且設(shè)置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('視頻主題')
});
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
標(biāo)簽：萍鄉(xiāng) 綏化 赤峰 阿壩 金昌 盤錦 聊城 中山
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《html5+css如何實(shí)現(xiàn)中間大兩頭小的輪播效果》，本文關(guān)鍵詞 html5+css,如何,實(shí)現(xiàn),中間,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
