本篇内容主要讲解“html5怎么实现轮播效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5怎么实现轮播效果”吧!

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;}.boxli{width:20%;float:left;list-style:none;-webkit-transition:width0.5s,height0.5s,margin0.5s;position:relative;}.boxvideo{width:100%;height:100%;}.boxlidiv{position:absolute;top:0;bottom:0;left:0;right:0;}.boxlidivimg{width:100%;height:100%;}/*.boxli:nth-child(2){height:360px;margin:01%;}*/.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%;}.boxli>p{margin:0;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}.boxli>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:

<divclass="wrap"><divclass="container"><ulclass="box"><liclass="video1"><video></video><div><imgsrc="3.jpg"alt="">1</div></li><liclass="video2"><video></video><div><imgsrc="3.jpg"alt="">2</div></li><liclass="video3"><video></video><div><imgsrc="3.jpg"alt="">3</div></li><liclass="video4"><video></video><div><imgsrc="3.jpg"alt="">4</div></li></ul><buttononclick="moveRight()"class="goLeftbtn">左</button><buttononclick="moveLeft()"class="goRightbtn">右</button></div><divclass="ddd"><divclass="dd-2"><divclass="aa">aaa</div><divclass="bb">vvvv</div></div></div></div>

js:

$(function(){$('.box>li:nth(1)').css({width:'36%',margin:'02%'})$('.box>li:nth(1)').append('视频主题')})$(window).resize(function(){//当浏览器大小变化时$('.box').css('height','auto')})functionmoveLeft(){varheight=$('.box>li:nth(1)').height()$('.box').css('height',height)$('.box>li').css({width:'20%',margin:'00%'})$('.box>li:nth(2)').css({width:'36%',margin:'02%'})$('.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('视频主题')});}functionmoveRight(){$('.box>li').css({width:'20%',margin:'00%'})$('.box>li:nth(0)').css({width:'36%',margin:'02%'})varheight=$('.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('视频主题')});}

到此，相信大家对“html5怎么实现轮播效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！