图片轮播（二）
这是和之前的图片轮播器(地址)差不多，效果也是大同小异，主要用的都是一个简单的渐变框架，大家可以看看区别
效果图：
布局不多说，基本思路还是和上次的一样的，点击下面的按钮，改变按钮就的样式，图片一开始就向下堆叠，用绝对布局点击的时候只要把只要修改top值就可以了
.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿淘宝幻灯片上下滑动效果
</title>
<link rel="stylesheet" type="text/css" href="css/tuPianLunHuan2.css"/>
<script type="text/javascript" src="js/tuPianLunHuan2.js"></script>
</head>
<body>
<div class="LunBo" id="LunBo">
<ol>
<li class="active">1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
</ol>
<ul>
<li><a href="javascript:;"><img src="img/1.jpg" alt="广告一"/></a></li>
<li><a href="javascript:;"><img src="img/2.jpg" alt="广告二"/></a></li>
<li><a href="javascript:;"><img src="img/3.jpg" alt="广告三"/></a></li>
<li><a href="javascript:;"><img src="img/4.jpg" alt="广告四"/></a></li>
<li><a href="javascript:;"><img src="img/5.jpg" alt="广告五"/></a></li>
<li><a href="javascript:;"><img src="img/6.jpg" alt="广告六"/></a></li>
<li><a href="javascript:;"><img src="img/7.jpg" alt="广告七"/></a></li>
</ul>
</div>
</body>
</html>
css代码
*
{
margin: 0;
padding: 0;
}
body{
background: grey;
}
#LunBo{
width:600px;
height:300px;
position: relative;
margin:0 auto;
margin-top: 100px;
overflow:hidden;
}
.active{
width: 34px;
height: 34px;
background: #feb338;
color: white;
filter:alpha(opacity:100);
opacity:1;
}
ol{
list-style:none;
position:absolute;
bottom:10px;
right:10px;
z-index:200;
font-size: 0;
}
ol li{
width:30px;
height:30px;
margin:2px;
vertical-align:bottom;
display: inline-block;
background:#f8efca;
border: 2px solid #d1a168;
filter:alpha(opacity:50);
opacity:0.5;
color: #bc7e47;
line-height: 30px;
font-size: 20px;
text-align: center;
font-weight: bold;
cursor: pointer;
}
ul{
position: absolute;
}
ul li{
list-style: none;
height: 300px;
}
ul li img{
height: 300px;
width: 600px;
}
js部分代码
window.onload =
function(){
var oDiv = document.getElementById(
'LunBo');
var oOl = oDiv.getElementsByTagName(
'ol')[
0];
var aBtnLi = oOl.getElementsByTagName(
'li');
var oUl = oDiv.getElementsByTagName(
'ul')[
0];
var aPLi = oUl.getElementsByTagName(
'li');
var nowIndex =
0;
for(
var i=
0; i<aBtnLi.length; i++){
aBtnLi[i].index = i;
aBtnLi[i].onclick =
function(){
nowIndex =
this.index;
tab();
}
}
function tab(){
for(
var j=
0; j<aBtnLi.length; j++){
aBtnLi[j].className =
'';
}
aBtnLi[nowIndex].className =
'active';
move(oUl, {top:-
300*nowIndex});
}
var timer = setInterval(next,
1000);
oUl.onmouseover =
function(){
clearInterval(timer);
};
oUl.onmouseout =
function(){
timer = setInterval(next,
1000);
};
function next(){
nowIndex++;
if(nowIndex==aBtnLi.length){
nowIndex =
0;
}
tab();
}
}
function move(obj,json, funEnd){
clearInterval(obj.timer);
obj.timer=setInterval(
function(){
var bStop =
true;
for(
var attr
in json){
var cur=
0;
if(attr==
'opacity'){
cur=
Math.round(
parseFloat(getStyle(obj,attr))*
100);
}
else{
cur=
parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/
7;
speed=speed>
0?
Math.ceil(speed):
Math.floor(speed);
if(cur!=json[attr]){
bStop =
false;
}
if(attr==
'opacity'){
obj.style.opacity=(cur+speed)/
100;
obj.style.filter=
'alpha(opacity:'+cur+speed+
')';
}
else{
var cur2 = cur+speed;
obj.style.filter=
'alpha(opacity:'+cur2+
')';
}
}
if(bStop){
clearInterval(obj.timer);
if(funEnd){
funEnd();
}
}
},
30);
};
源代码
