js轮播效果图

浏览数：28 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}

#slideBox{
position: relative;
height: 200px;
width: 500px;
margin: 0px auto;
margin-top: 50px;
}
#slideBox .slide{
position: absolute;
z-index: 0;
}
#slideBox .slide01{
z-index: 1;
}
#slideBox .slide span.txt, #slideBox .slide img{
display: block;
}

#slideBox .slide span.txt{
position: absolute;
width: 500px;
height: 40px;
background: #000;
filter:alpha(opaccity=50);
opacity: 0.5;
bottom: 0px;

}
#slideBox .slide span.txt a{
position: absolute;
color: #fff;
text-decoration: none;
font:bold 16px/2 \5b8b\4f53,serif;
left:28px;
top: 2px;
}
#slideBox .btns{
position: absolute;
z-index: 999;
right: 0px;
bottom: 11px;
}
#slideBox .btns li{
list-style: none;
float: left;
height: 18px;
width: 18px;
background: #999;
margin-right: 5px;
text-align: center;
}
#slideBox .btns li a{
text-decoration: none;
color: #fff;
font:bold 16px \5b8b\4f53,serif;
}
#slideBox .btns li a:hover{
text-decoration: underline;
}
#slideBox .btns li.current{
background: #f33;
}

</style>
<script type="text/javascript">
// var str = "我爱美丽的美国";
// alert(str.substring(str.indexOf("美")));
</script>
</head>
<body>

<div class="slideBox" id="slideBox">
<div class="slide slide01">
<a href="#" class="pic"><img src="images/01.jpg"></a>
<span class="txt"><a href="#">酷跑11111111111</a></span>
</div>
<div class="slide slide02">
<a href="#" class="pic"><img src="images/02.jpg"></a>
<span class="txt"><a href="#">酷跑2222222222</a></span>
</div>
<div class="slide slide03">
<a href="#" class="pic"><img src="images/03.jpg"></a>
<span class="txt"><a href="#">酷跑33333333333</a></span>
</div>
<div class="slide slide04">
<a href="#" class="pic"><img src="images/04.jpg"></a>
<span class="txt"><a href="#">酷跑44444444444</a></span>
</div>
<div class="slide slide05">
<a href="#" class="pic"><img src="images/05.jpg"></a>
<span class="txt"><a href="#">酷跑55555555555</a></span>
</div>
<ul class="btns">
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
//通过css名字获取标签，返回数组
//getElementsByClassName
//第一个参数..父级节点..
//2：我们需要在父级节点下面去寻找的class的名字
function getByClassName(parent,className){
//找到父级节点节点下面所有的标签
var nodes = parent.getElementsByTagName("*");
var arr = [];//声明的空的数组
for(var i=0;i<nodes.length;i++){
//获取每一个标签上面class名字和你传入的class名字一样的标签
if(nodes[i].className.indexOf(className) != -1){
//把符合条件的标签放入数组
arr.push(nodes[i]);
}
}
return arr;
}
function slide(){
//获取上级div
var oSlide = $("slideBox");
//在oSlide下面找到所有class=‘slide‘
var divs = getByClassName(oSlide,"slide");
//在在oSlide下面找到所有class=‘btns‘的标签...只是获取第一个
//然后再到这个下面找到所有的li标签
var btns = getByClassName(oSlide,"btns")[0].getElementsByTagName("li");

//循环所有的li标签按钮
for(var i=0;i<btns.length;i++){
//给每一个标签加上事件
btns[i].onmouseover = function(){
//首先清空自动运行timer
clearInterval(timer);
//下面的循环是把所有的样式和图片先还原到原始的状态
for(var j=0;j<btns.length;j++){
btns[j].className = "";
divs[j].style.zIndex = 0;
}

//下面是把鼠标指向的那个li和图片换成我们想要的效果
this.className = "current";
//这里的v只是为了让li标签和图片之间建立一种关联关系
//a标签里面的值-1实际就是图片数组的下标
var v = parseInt(this.getElementsByTagName("a")[0].innerHTML)-1;
divs[v].style.zIndex = 1;
}
//移开的时候又自动轮播
btns[i].onmouseout = function(){
var v = parseInt(this.getElementsByTagName("a")[0].innerHTML)-1;
//注意这里传入一个参数...是为了鼠标移开之后...从你离开的这个位置继续
//向下轮播
autoSlide(v);
}
}
}
var timer = 0;
//这里最需要注意的就是传入的这个参数...需要大家理解
function autoSlide(index){
var index = index || 0;
var oSlide = $("slideBox");
var divs = getByClassName(oSlide,"slide");
var btns = getByClassName(oSlide,"btns")[0].getElementsByTagName("li");

//可以直接把函数写在setInterval里面
timer = setInterval(function(){
if(index >= btns.length){
index = 0;
}
for(var i=0;i<btns.length;i++){
btns[i].className = "";
divs[i].style.zIndex = 0;
}
btns[index].className = "current";
divs[index].style.zIndex = 1;
index ++;
},1000);
}
window.onload = function(){
slide();
autoSlide();
}
</script>
</html>