背景切换jquery

jquery：
//404背景切换js
$(document).ready(function()
{
    $('#bodyColorDF').css('background-color','black');
    $('#bodyColor1').css('background-image','url(/static/image/tabpicture/1.jpg)');
    $('#bodyColor2').css('background-image','url(/static/image/tabpicture/2.jpg)');
    $('#bodyColor3').css('background-image','url(/static/image/tabpicture/3.jpg)');
    $('#bodyColor4').css('background-image','url(/static/image/tabpicture/4.jpg)');
    $('#bodyColor5').css('background-image','url(/static/image/tabpicture/5.jpg)');
    $('#bodyColor6').css('background-image','url(/static/image/tabpicture/6.jpg)');
    $('#bodyColor7').css('background-image','url(/static/image/tabpicture/7.jpg)');
    $('#bodyColor8').css('background-image','url(/static/image/tabpicture/8-1.gif)');
    $('#bodyColor9').css('background-image','url(/static/image/tabpicture/9.jpg)');
    $('#bodyColor10').css('background-image','url(/static/image/tabpicture/10.gif)');
    $('#bodyColor11').css('background-image','url(/static/image/tabpicture/11.gif)');
    $('#bodyColor12').css('background-image','url(/static/image/tabpicture/12.jpg)');
  var countNumbers = 0;
$('#oB').click(function()
{
    countNumbers += 1; 
    switch(countNumbers)
    {
         case 1:
        $('#bodyColor').css('background-color','black').slideToggle(500);
            break; 
        case 2:
        $('#bodyColor-1').css('background-color','LightCoral').slideToggle(500);
            break; 
        case 3:
        $('#bodyColor-2').css('background-color','#ff4500').slideToggle(500);
            break; 
        case 4:
        $('#bodyColor-3').css('background-color','Khaki').slideToggle(500);
            break; 
        case 5:
        $('#bodyColor-4').css('background-color','green').slideToggle(500);
            break; 
        case 6:
        $('#bodyColor-5').css('background-color','LawnGreen').slideToggle(500);
            break; 
        case 7:
        $('#bodyColor-6').css('background-color','blue').slideToggle(500);
            break; 
        case 8:
        $('#bodyColor-7').css('background-color','#9400d3').slideToggle(500);
            break; 

        case 9:
        $('#bodyColor1').slideToggle(500);
            break; 
        case 10:
        $('#bodyColor2').slideToggle(500);
            break; 
        case 11:
        $('#bodyColor3').slideToggle(500);
            break; 
        case 12:
        $('#bodyColor4').slideToggle(500);
            break; 
        case 13:
        $('#bodyColor5').slideToggle(500);
            break; 
        case 14:
        $('#bodyColor6').slideToggle(500);
            break; 
        case 15:
        $('#bodyColor7').slideToggle(500);
            break; 
        case 16:
        $('#bodyColor8').slideToggle(500);
            break; 
        case 17:
        $('#bodyColor9').slideToggle(500);
            break; 
        case 18:
        $('#bodyColor10').slideToggle(500);
            break; 
        case 19:
        $('#bodyColor11').slideToggle(500);
            break;
        case 20:
        $('#bodyColor12').slideToggle(500);
            break; 
        case 21:
        $('#bodyColorDF').slideToggle(500);
            break;    
    }

});

});

html：

<div id = 'bodyColor'> </div>
<div id = 'bodyColor-1'> </div>
<div id = 'bodyColor-2'> </div>
<div id = 'bodyColor-3'> </div>
<div id = 'bodyColor-4'> </div>
<div id = 'bodyColor-5'> </div>
<div id = 'bodyColor-6'> </div>
<div id = 'bodyColor-7'> </div>

<div id = 'bodyColor1'> </div>
<div id = 'bodyColor2'> </div>
<div id = 'bodyColor3'> </div>
<div id = 'bodyColor4'> </div>
<div id = 'bodyColor5'> </div>
<div id = 'bodyColor6'> </div>
<div id = 'bodyColor7'> </div>
<div id = 'bodyColor8'> </div>
<div id = 'bodyColor9'> </div>
<div id = 'bodyColor10'> </div>
<div id = 'bodyColor11'> </div>
<div id = 'bodyColor12'> </div>

<div id = 'bodyColorDF'> </div>
 
 <div id = 'oO'> </div>

<button type="button" id = 'oB'>>></button>