详细代码和图片在百度云里面下载http://pan.baidu.com/s/1hs2hl6O
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>背景图片做轮播+自动轮播</title>
<style type="text/css">
*, body {
margin: 0px;
padding: 0px;
}
#container {
margin-left: 200px;
background-color: darkgrey;
text-align: center;
980px;
}
#top {
980px;
height: 65px;
/**/
background-image: url("img/topbg.png");
background-size: auto;
background-position: center;
/**/
}
#bottom {
980px;
height: 65px;
background-image: url("img/bottombg.png");
background-size: auto;
background-position: center;
/**/
}
#banner {
980px;
height: 330px;
background-image: url("img/1.jpg");
/*background-position: left;*/
/*background-repeat: no-repeat;*/
position: relative;
-webkit-transition: all 1.8s linear;
}
#banner-left {
background-image: url("img/images/btn_03.png");
60px;
height: 60px;
position: absolute;
margin-top: 130px;
opacity: 0;
-webkit-transition: all 0.8s linear;
}
#banner-right {
background-image: url("img/images/btn_01.png");
60px;
height: 60px;
position: absolute;
right: 0px;
margin-top: 130px;
opacity: 0;
-webkit-transition: all 0.8s linear;
}
#banner:hover > #banner-right, #banner:hover > #banner-left {
opacity: 0.8;
/*background-image: url("../img/images/btn_02.png");*/
}
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="banner">
<div id="banner-left" onclick="Oclick(this)"></div>
<div id="banner-right" onclick="Oclick(this)"></div>
</div>
<div id="bottom"></div>
</div>
<script type="text/javascript">
var num = 1, TM=0;
var oBanner = document.getElementById("banner")
var Time1 = new Date();
var p=0;
function Oclick(Athis) {
TM = 1;
oBanner.style.backgroundPosition="490px";
clearInterval(B); //点击时清除自动轮播
if (Athis.id.substr(7, 1) == "r") {
num++;
p++;
}
else {
p--;
num--;
}
//限制轮播极限，以免越界
if (num > 8) {
num = 1;
}
if (num < 1) {
num = 5
}
oBanner.style.backgroundPosition=p*980+"px";//每次移动980 ，背景重复情况下制造推动的视觉效果
oBanner.style.backgroundImage = "url('img/" + num + ".jpg')";
}
//定时调用函数，更换背
var B= setInterval(oAtuo,2000);
var num1=num;
function oAtuo() {
num1++;
if (num1 > 8) {
num1 = 1;
}
oBanner.style.backgroundImage = "url('img/" + num1 + ".jpg')";
}
</script>
</body>
</html>