您的位置：首页 > Web前端 > JavaScript

Javascript模仿阿里云首页实现图片轮询效果

2014-08-25 09:53 681 查看

<body>
<div class="box" id="box">
<div class="box1">
<div class="picbox" style="display:block;">
<img src="http://gtms03.alicdn.com/tps/i3/TB1HlZvFVXXXXcxXVXXBNVOLXXX-1600-350.jpg" />
<div class="shadow"></div>
<p class="title">图片一</p>
</div>
<div class="picbox">
<img src="http://gtms04.alicdn.com/tps/i4/TB14d.tFVXXXXb9XFXXBNVOLXXX-1600-350.jpg" />
<div class="shadow"></div>
<p class="title">图片二</p>
</div>
<div class="picbox">
<img src="http://gtms04.alicdn.com/tps/i4/TB1XTEZFVXXXXaZXXXXBNVOLXXX-1600-350.jpg" />
<div class="shadow"></div>
<p class="title">图片三</p>
</div>
<div class="picbox">
<img src="http://gtms01.alicdn.com/tps/i1/TB1DzIJFVXXXXcDXpXXBNVOLXXX-1600-350.jpg" />
<div class="shadow"></div>
<p class="title">图片四</p>
</div>
<div class="picbox">
<img src="http://gtms01.alicdn.com/tps/i1/TB1ak8EFVXXXXaXapXXBNVOLXXX-1600-350.jpg" />
<div class="shadow"></div>
<p class="title">图片五</p>
</div>
<div class="picbtn" id="btn">
<a href="javascript:void(0)" class="act"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
</div>
</div>
</div>
</body>

.box {width: 1600px;height: 350px;border: solid 1px #CCC;padding: 5px;}
.box .box1 {width: 1600px;height: 350px;position: relative;overflow: hidden;}
.box .box1 .picbox {width: 1600px;height: 350px;position: relative;display: none;}
.box .box1 .picbox .shadow {width: 100%;height: 30px;position: absolute;bottom: 0px;left: 0px;background: #666;opacity: 0.5;filter: alpha(opacity=50);}
.box .box1 .picbox .title {margin: 0;padding: 0;width: 350px;height: 30px;line-height: 30px;position: absolute;bottom: 0px;left: 0px;text-indent: 0.5em;color: #FFF;}
.box1 .picbtn {width: 155px;height: 30px;position: absolute;right: 0px;bottom: -8px;}
.box1 .picbtn a {width: 25px;height: 12px;display: block;float: left;margin-right: 5px;background-color: #50f0d8;}
.box1 .picbtn a.act {background-color: #FFF;}

window.onload = function(){
var oBox = document.getElementById('box');
var oBtn = document.getElementById('btn');
var aBtn = oBtn.getElementsByTagName('a');			//alert(aBtn.length);
var aPicText = getByclass('picbox', oBox);
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;				//先隐藏全部，在单独显示选中的
aBtn[i].onmouseover = function() {
for (var n = 0; n < aBtn.length; n++) {
aPicText
.style.display = "none";
aBtn
.className = '';
}
aPicText[this.index].style.display = "block"
this.className = 'act';
}
aBtn[i].onclick = function() {
for (var n = 0; n < aBtn.length; n++) {
aPicText
.style.display = "none";
aBtn
.className = '';
}
aPicText[this.index].style.display = "block"
this.className = 'act';
}
}			//得到class为picBox的div
function getByclass(sName, oParent) {
var obj = oParent.getElementsByTagName('*');
var result = [];
for (var i = 0; i < obj.length; i++) {
if (obj[i].className == sName) {
result.push(obj[i]);
}
}
return result;
}
setInterval(function(){
for (var n = 0; n < aBtn.length; n++) {
if(aPicText
.style.display == 'block' && aBtn
.className == 'act'){
aPicText
.style.display = "none";
aBtn
.className = '';
if(n==aBtn.length-1){
aPicText[0].style.display = "block";
aBtn[0].className = 'act';
}else{
aPicText[n+1].style.display = "block";
aBtn[n+1].className = 'act';
}
break;
}
}
},5000);
}

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

标签：

相关文章推荐

新的分享

章节导航