您的位置：首页 > 其它

利用背景图片制作轮播（手自一体化）

2016-05-05 09:24 323 查看

详细代码和图片在百度云里面下载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;
width: 980px;

}

#top {
width: 980px;
height: 65px;
/**/
background-image: url("img/topbg.png");
background-size: auto;
background-position: center;
/**/
}

#bottom {
width: 980px;
height: 65px;
background-image: url("img/bottombg.png");
background-size: auto;
background-position: center;
/**/

}

#banner {
width: 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");
width: 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");
width: 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航