核心提示：图片轮播（二）这是和之前的图片轮播器(地址)差不多，效果也是大同小异，主要用的都是一个简单的渐变框架，大家可以看看区别效果图：布局不多说，基本思路还是和上次的一样的，点击下面的按钮，改变按钮就的样式，...
图片轮播（二）
这是和之前的图片轮播器(地址)差不多，效果也是大同小异，主要用的都是一个简单的渐变框架，大家可以看看区别
效果图：
布局不多说，基本思路还是和上次的一样的，点击下面的按钮，改变按钮就的样式，图片一开始就向下堆叠，用绝对布局点击的时候只要把只要修改top值就可以了<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxociAvPg0KPGgyIGlkPQ=="html代码">.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>
<p 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>
</p>
</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;
}
/*这里使用display:inline-block,因为float不能使用vertical-align:bottom下对齐;
* display：inline-block两个元素之间会默认有一个空格哦，你给父级p加上font-size：0
* 就可以避免的，要设置字体大小可以在子元素里再设置*/
ol li{
width:30px;
height:30px;
margin:2px;
/*float:left;*/
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{
/*height:1500px;
width: 600px;*/
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; iseout="function(){" oul.onmouseover="function(){" oul.style.top="-300*nowIndex+'px';" speed="(json[attr]-cur)/7;" timer="setInterval(next," var="">0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]){ //有一个值不相等就变成false
bStop = false;
}
if(attr=='opacity'){
// 设置透明度
obj.style.opacity=(cur+speed)/100;
obj.style.filter='alpha(opacity:'+cur+speed+')';
}else{
//这里用来设置left的
obj.style[attr]=cur+speed+"px";
}
}
if(bStop){
clearInterval(obj.timer);
if(funEnd){
funEnd();
}
}
},30);
};
