主要記錄一下今天學到的內容:
css代碼:
ol,ul{
list-style: none;
}
/* 頭部開始 */
.head{
/*background-color: red;*/
height: 500px;
padding-top: 10px;
}
.head .nav{
height: 480px;
overflow: hidden;
position: relative;
width: 1200px;
left: 50%;
margin-left: -600px;
/*line-height: 150px;*/
}
.head .num{
position: absolute;
right: 5px;
bottom: 5px;
}
.head .num li{
float: left;
width: 16px;
height: 16px;
text-align: center;
border: 1px solid #ff7300;
background-color: #fff;
margin: 3px 1px;
overflow: hidden;
line-height: 16px;
}
.head .num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
background-color: #ff7300;
border: 0;
}
H5和Jquery代碼:
<div class="head">
<div class="nav">
<ul class="ad">
<li><img src="img/slider1.jpg"></li>
<li><img src="img/slider2.jpg"></li>
<li><img src="img/slider3.jpg"></li>
<li><img src="img/slider4.jpg"></li>
</ul>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<div class="content"></div>
<div class="footer"></div>
<script src="jquery.min.js"></script>
<script>
var len=$(".num>li").length;
var index=0;
var adTimer;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
showImage(index);
})
$(".nav").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
showImage(index);
index++;
if(index==len)
index=0;
},3000);
}).trigger("mouseleave");
function showImage(index)
{
var adHeight=$(".nav>ul>li:first").height();
if(index==0)
$(".ad").stop(true,false).animate({
"marginTop":-adHeight*index+"px"
},1);
else
$(".ad").stop(true,false).animate({
"marginTop":-adHeight*index+"px"
},1000);
$(".num li").removeClass("on").eq(index).addClass("on");
}
</script>
函數說明:
1.eq():
如果給定表示 DOM 元素集合的 jQuery 對象,.eq() 方法會用集合中的一個元素構造一個新的 jQuery 對象。所使用的 index 參數標示集合中元素的位置。
2.triggle():
trigger() 方法觸發被選元素的指定事件類型,這次主要爲了頁面一進來就開始執行mouseleave事件
3.hover():
hover() 方法規定當鼠標指針懸停在被選元素上時要運行的兩個函數。
jQuery 1.7 版本前該方法觸發 mouseenter 和 mouseleave 事件。
jQuery 1.8 版本後該方法觸發 mouseover 和 mouseout 事件。
這次主要爲了開始計時和結束