1
            
            
                
                
2
            
            
                
                
3
            
            
                
                
4
            
        
        左 
        右
    

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怎么实现中间大两头小的轮播效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！