HTML+CSS代碼如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>index</title> <style type="text/css"> body,ul,li{ margin:0px; padding:0px;} body{ background:url(img/bg.jpg) center; } #banner{ width:730px; height:390px; /*border:solid 1px #ff0;*/ margin:100px auto 0px; background-image:url(img/1.png); border-radius:10px; box-shadow:0px 0px 15px #fff; } #btn{ width:55px; height:280px; position:fixed; right:30px; top:150px; } #btn ul li{ list-style:none; width:55px; height:55px; border-radius:100%; margin:10px 0; background-image:url(img/icon.jpg); cursor:pointer; } </style> <script type="text/javascript" src="js/jquery.js"> </script> <script type="text/javascript"> $(function(){ var indexc=0; var play=null; $("#btn ul li").click(function(){ clearInterval(play); indexc=$(this).index(); /*$(this).animate({'background-position-x':'-80px'},500).siblings().css('background-position-x','0'); $("#banner").animate({'background-position-y':-390*indexc+'px'},500);*/ move(); play=play=setInterval(function() { indexc++; indexc%=4; move(); },3000) ; }); play=setInterval(function() { indexc++; indexc%=4; move(); },3000) ; function move() { $("#btn ul li").eq(indexc).animate({'background-position-x':'-80px'},500).siblings().css('background-position-x','0'); $("#banner").animate({'background-position-y':-390*indexc+'px'},500); } }); </script> </head> <body> <div id="banner"> </div> <div id="btn"> <ul> <li></li> <li style="background-position-y:56px;"></li> <li style="background-position-y:126px;"></li> <li style="background-position-y:-70px;"></li> </ul> </div> </body> </html>
總結：
1、頁面調整背景圖片位置，background-position 這個屬性很重要；通過調整這個屬性的值可以實現各個布局的不同位置圖片；
2、圖片的滾動效果，我們可以使用setInterval來定義計時器，同時可以通過clearInterval清理計時器；
3、背景區域的發光效果，我們可以通過box-shadow來設置，該屬性傳入四個參數：偏移X方向，偏移Y方向，擴散半徑，以及陰影顏色；