html5+css如何實(shí)現(xiàn)中間大兩頭小的輪播效果
發(fā)布時(shí)間：2018-12-06 17:04:45 作者：嘻嘻嘻 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了html5+css如何實(shí)現(xiàn)中間大兩頭小的輪播效果的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
國(guó)際慣例，先上效果
好了，話(huà)不多說(shuō)，上去就是一頓擼。
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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
HTML5+css3：3D旋轉(zhuǎn)木馬效果相冊(cè)
這篇文章主要介紹了HTML5+css3：3D旋轉(zhuǎn)木馬效果相冊(cè)，主要運(yùn)用了perspective和tranlateY這兩個(gè)知識(shí)點(diǎn)，有需要的可以了解一下。2017-01-03
這篇文章主要介紹了純HTML和CSS實(shí)現(xiàn)JD輪播圖效果,需要的朋友可以參考下2018-06-01
HTML+CSS+JS實(shí)現(xiàn)堆疊輪播效果的示例代碼
這篇文章主要介紹了HTML+CSS+JS實(shí)現(xiàn)堆疊輪播效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-08- 這篇文章主要介紹了HTML5輪播圖全代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-22
HTML+CSS實(shí)現(xiàn)全景輪播的示例代碼
本文主要介紹了HTML+CSS實(shí)現(xiàn)全景輪播的示例代碼，實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)布局，其中包含了五個(gè)不同的盒子，每個(gè)盒子都有一個(gè)不同的背景圖片，并且它們之間有一些間距，下面就2024-02-02
