國際慣例，先上效果

好了，話不多說，上去就是一頓擼。

css:

*{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%;

}

html:

• 1
• 2
• 3
• 4

左

右

aaavvvv

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('視頻主題')

});

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

總結

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

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