标签：position jquery relative 幻灯片 hidden
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<style>
*{margin:0px;padding:0px;}
li{
list-style: none;
}
#slide{
width:100%;
height:420px;
overflow:hidden;
position:relative;
}
#slide .slide-box{
width:100%;
height:420px;
position:relative;
}
#slide .slide-box li{
background-position:50% 0px;
background-repeat:no-repeat;
width:100%;
height:420px;
overflow:hidden;
position:absolute;
left:0px;
top:0px;
opacity:0;
filter:alpha(opacity=0);
}
#slide .slide-box li div{
width:755px;
height:420px;
position:relative;
margin:0px auto;
}
#slide .slide-box li b{
width:760px;
height:210px;
display:block;
position:absolute;
left:0px;
top:-40px;
background-position:20px 0px;
background-repeat:no-repeat;
z-index:1;
opacity:0;
filter:alpha(opacity=0);
}
#slide .slide-box li a{
width:755px;
height:420px;
background:url(./images/spaceball.gif);
display:block;
position:absolute;
left:0px;
top:0px;
z-index:2;
}
#slide .slide-nav{
width:100%;
height:30px;
position:absolute;
bottom:0px;
left:0px;
z-index:3;
}
#slide .slide-nav .slide-nav-box{
width:755px;
height:30px;
line-height:30px;
margin:0px auto;
}
#slide .slide-nav .slide-nav-box a{
display:inline-block;
width:14px;
height:14px;
border-radius:50%;
background:#b5b5b5;
margin:0px 3px;
}
#slide .slide-nav .slide-nav-box a.active{
background:#c80002;
}
</style>
<script src="jquery.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){
//得到这群图片li
var oLis = $(‘#slide .slide-box li‘);
//得到小圆圈的对象组
var oPage = $(‘#slide .slide-nav a‘);
var lens = oLis.size();
//定义一个定时器
var oTimer = null;
//遍历
oPage.each(function(index){
$(this).mouseover(function(){
//将索引传入函数
slideRun(index);
})
});
//动起来的函数
function slideRun(index){
iNow = index;
//1--小圆圈--先给自己加上，去除兄弟的样式
oPage.eq(index).addClass(‘active‘).siblings().removeClass(‘active‘);
//2--图片--opacity:0
//开始一个动画之前 停止所有之前的动画
oLis.eq(index).siblings().stop().animate({
opacity:0
},600).find(‘b‘).stop().animate({
//3--小文字 向上 并消失
top: -40,
opacity:0
},600);
oLis.eq(index).stop().animate({
opacity:1
},600).find(‘b‘).stop().animate({
//小文字 向下并显示
opacity : 1,
top : -10
},600);
}
//当前显示第几张
var iNow = 0;
autoRun();
function autoRun(){
oTimer = setInterval(function(){
if(iNow > lens-1){
//边界控制
iNow = 0;
}
slideRun(iNow);
iNow++;
},5000);
}
//
oLis.hover(function(){
//鼠标放上去--->图片停止
//清除定时器
clearInterval(oTimer);
},function(){
//鼠标移开----->图片开始自动切换
autoRun();
})
})
</script>
</head>
<body>
<div id="slide">
<ul class=‘slide-box‘>
<li style="background-image:url(./images/1.jpg);opacity:1;filter:alpha(opacity=100);">
<div>
<b style="background-image:url(./images/1.png);opacity:1;filter:alpha(opacity=100);"> </b>
<a href="javascript:void(0);"> </a>
</div>
</li>
<li style="background-image:url(./images/2.jpg);">
<div>
<b > </b>
<a href="javascript:void(0);"> </a>
</div>
</li>
<li style="background-image:url(./images/3.jpg);">
<div>
<b > </b>
<a href="javascript:void(0);"> </a>
</div>
</li>
<li style="background-image:url(./images/4.jpg);">
<div>
<b style="background-image:url(./images/4.png);"> </b>
<a href="javascript:void(0);"> </a>
</div>
</li>
<li style="background-image:url(./images/5.jpg);">
<div>
<b style="background-image:url(./images/5.png);"> </b>
<a href="javascript:void(0);"> </a>
</div>
</li>
</ul>
<div class=‘slide-nav‘>
<div class=‘slide-nav-box‘>
<a class=‘active‘ href="javascript:void(0);"> </a>
<a href="javascript:void(1);"> </a>
<a href="javascript:void(2);"> </a>
<a href="javascript:void(3);"> </a>
<a href="javascript:void(4);"> </a>
</div>
</div>
</div>
</body>
</html>标签：position jquery relative 幻灯片 hidden
原文地址：http://saiyoung.blog.51cto.com/9162541/1639996
