在網(wǎng)頁中瀏覽中我們可以看到很多不同的輪番圖，那么我們今天就來講講有關(guān)于：“html5如何實現(xiàn)輪播效果？實現(xiàn)方法分享！”這個內(nèi)容的相關(guān)內(nèi)容和講解！
國際慣例，先上效果
好了，話不多說，上去就是一頓擼。
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 () {
// 把第一個子元素移到最后，并且設(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('視頻主題')
});
}以上就是有關(guān)于：“html5如何實現(xiàn)輪播效果？實現(xiàn)方法分享！”這方面的相關(guān)內(nèi)容的講解，當然在html5中相關(guān)的使用和內(nèi)容不止如此，更多有關(guān)于html5中這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進行學(xué)習(xí)和了解！
