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{ 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{ 55px; height:280px; position:fixed; right:30px; top:150px; } #btn ul li{ list-style:none; 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方向，扩散半径，以及阴影颜色；