1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <script src="http://code.jquery.com/jquery-latest.js"></script> 7 <style type="text/css" media="screen"> 8 .content{width: 500px; height: 500px;position: relative; margin:50px auto; } 9 .content span{cursor:pointer;width: 20px; height: 20px; display: inline-block; position: absolute;background-color:#f00; top:50%; margin-top: -10px; } 10 .content #prev{left: 10px;} 11 #bgcc{width: 400px; height: 400px; background-color: #ccc;position: absolute; top: 50px; left: 50px;} 12 .content #next{right: 10px;} 13 #picNum{position: absolute; width: 80px; text-align: center; top: 26px; display: inline-block; left: 50%; margin-left: -40px; font-size: 18px;} 14 </style> 15 </head> 16 <body> 17 <div class="content"> 18 <span id='prev'></span> 19 <span id='next'></span> 20 <strong id="picNum">图片计算ing</strong> 21 <div id="bgcc"></div> 22 </div> 23 <script type="text/javascript" charset="utf-8"> 24 $(function(){ 25 var $prev=$('#prev'), 26 $next=$('#next'), 27 $bgcc=$('#bgcc'), 28 $picNum=$('#picNum'), 29 $arrbg=['#414381','red','green','blue','#6df8a5'], //更换的背景颜色 30 nuec=0; 31 $bgcc.css('background-color',$arrbg[nuec]); //初始化背景颜色为0 32 $('#picNum').html(nuec+1+'/'+ $arrbg.length); //初始化计算的个数为 1/5 33 $prev.click(function(ev){ 34 ev.preventDefault(); 35 nuec--; 36 if(nuec==-1){ //当点击数组的个数等于-1的时候，回到最后一个背景颜色 37 nuec=($arrbg.length-1); 38 } 39 $bgcc.css('background-color',$arrbg[nuec]); 40 $('#picNum').html(nuec+1 +'/'+ $arrbg.length) 41 42 }) 43 $next.click(function(ev){ 44 ev.preventDefault(); 45 nuec++; 46 if(nuec==($arrbg.length)){ //当点击的个数为总数的时候，回到第一个位置 47 nuec=0 48 } 49 50 $bgcc.css('background-color',$arrbg[nuec]); 51 $('#picNum').html(nuec+1+'/'+ $arrbg.length) 52 53 }) 54 55 }) 56 57 58 59 </script> 60 </body> 61 </html>