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方向，扩散半径，以及阴影颜色；
时间： 2024-10-13 08:19:55