html5+css怎么实现中间大两头小的轮播效果
小编给大家分享一下html5+css怎么实现中间大两头小的轮播效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联主要从事网站建设、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务丰都,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
国际惯例，先上效果
css:
html:
左
右
aaa vvvv
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('视频主题')
});
}以上是“html5+css怎么实现中间大两头小的轮播效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网页题目：html5+css怎么实现中间大两头小的轮播效果
标题链接：http://bzwzjz.com/article/ggeieg.html
