溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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(./p_w_picpaths/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 >
<div>
<b > </b>
<a href="javascript:void(0);"> </a>
</div>
</li>
<li >
<div>
<b > </b>
<a href="javascript:void(0);"> </a>
</div>
</li>
<li >
<div>
<b > </b>
<a href="javascript:void(0);"> </a>
</div>
</li>
<li >
<div>
<b > </b>
<a href="javascript:void(0);"> </a>
</div>
</li>
<li >
<div>
<b > </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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
