背景切换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>