首页 > 代码库 > 图片轮播器
图片轮播器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播器</title>
<style>
div{
width:300px;
height: 450px;
margin: 100px auto ;
border: 10px solid #E6E6E6;
position: relative; //div绝对定位 相当于浏览器？
background: #E2EAED;
}
img{
width: 300px;
height: 450px;
}
a{
width: 50px;
height: 50px;
text-decoration: none;
font-size: 30px;
font-weight: blod;
font-family: "微软雅黑";
color: white;
border: 5px solid white;
background: black;
position: absolute; //相当定位 跟父类div 这样可以设置a位于div上面
}
#pre{
top:195px; //相对div195px
left: -60px;
}
#next{
top:195px;
right: -60px;
}
p{
position: absolute;
background: black;
color: white;
font-size: 30px;
width: 300px;
text-align: center;
margin: 0;
filter:alpha(opacity=70); //设置透明度
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
span{
position: absolute;
background: black;
color: white;
font-size: 30px;
width: 300px;
text-align: center;
bottom: 0px;
margin: 0;
filter:alpha(opacity=70); // 设置透明度
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
img:hover{ //鼠标放上去图片旋转
transition-duration: 1s; //延时过渡 //要与delay区分
-moz-transition-duration: 1s; /* Firefox 4 */
-webkit-transition-duration: 1s; /* Safari 和 Chrome */
-moz-transform:rotate(360deg) scale(1.5); -webkit-transform:rotate(360deg) scale(1.5); //旋转角度 跟图片变化大小
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById(‘div1‘);
var oPre = document.getElementById(‘pre‘);
var oNext = document.getElementById(‘next‘);
var oNum = document.getElementById(‘num‘);
var oText = document.getElementById(‘text‘);
var oImg = document.getElementById(‘img‘);
var arrTop = [‘美女mm‘,‘青春记忆‘,‘可爱动人‘,‘清纯可爱‘];
var arrImg = [‘01.JPG‘,‘02.JPG‘,‘03.JPG‘,‘04.JPG‘];
var num = 0;
//初始化
function change(){
oNum.innerHTML = num+1+‘/‘+arrTop.length;
oImg.src = http://www.mamicode.com/arrImg[num];
oText.innerHTML = arrTop[num];
}
change();
oPre.onmouseover = function(){ //要是改为 oPre.onclick 不成功？？？
num --;
if (num<0) {
num = 3;
change();
}else{
change();
}
};
oNext.onmouseover = function(){
num ++;
if (num>3) {
num = 0;
change();
}else{
change();
}
};
};
</script>
</head>
<body>
<div id="div1">
<a id="pre" href=""><</a>
<a id="next" href="">></a>
<p id="num">图片正在加载~~</p> <!-- 1/4 -->
<span id="text">请稍后~~</span>
<img id="img" />
</div>
</body>
</html>
图片轮播器