DIV CSS 佈局教程網

效果圖.如下：

動畫效果介紹：這組廣告效果是打開頁面後圖片會自動播放，從1-5共計5張圖片，如果屬標放到右下角的1、2、3、4、5列表上，可以自由進行切換到自己想看的圖片上去。圖片切換是由下到上變換的。

制作思路：先將這5張圖片分別放入到ul的5個li列表中,
《1》求出圖片個的總個數. 並當我們如果在單擊1.2.3.4.5時就將它對應的數字傳過去，就它顯示對應的圖片。
《2》如果屬標放上，就停止動畫（可以利用clearIntval() ），如果屬標移到，我們可以利用 setIntval(函數，時間) 去每隔3000毫秒去執行一下這個函數一次。
《3》完成這個動畫函數。在這個函數中首先我們可以得到這個動畫區域（.slider）的高度。再利用animate自定義動畫函數實現在TOP位置上變化。並且給當前li中的數字加上高亮效果。
《4》還有一點就是要使這裡的TOP變化正常，一定要在當前區域的父標記(.ad)中設置"position:relative;" 一切就都已OK了。制作代碼如下：

1》html結構如下：
代碼如下:
<div class="ad" >
<ul class="slider" >
<li><img src="images/ads/1.gif"/></li>
<li><img src="images/ads/2.gif"/></li>
<li><img src="images/ads/3.gif"/></li>
<li><img src="images/ads/4.gif"/></li>
<li><img src="images/ads/5.gif"/></li>
</ul>
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>


2》jquery 代碼如下:

代碼如下:
//超鏈接文字提示
$(function(){
var len = $(".num >li").length;
var index = 0;
var adTimer;

$(".num li").mouseover(function(){
index = $(".num li").index(this); //這裡的 " this " 可以換成 " $(this) "
showImg(index);
}).eq(0).mouseover(); //用來初如化，當打開頁面時，做第一個圖片為屬標放上時去觸發動畫.


//以<ad 圖片>為對象, 屬標滑入停止動畫，屬標滑出開始動畫
$(".ad").hover(function(){
clearInterval(adTimer);
},function(){
adTimer = setInterval(function(){
showImg(index);
index++;
if( index == len ){ index=0; }
} , 3000);
}).trigger("mouseleave");
})

//通過給定的的索引 顯示不同的圖片

function showImg(index){
var adHeight = $(".content_right .ad").height();
$(".slider").stop(true,false).animate( {"top": -adHeight*index},1000 );
$(".num li").removeClass("on")
.eq(index).addClass("on");
}


3》對應的CSS樣式：


代碼如下:
.content_right{
background:#eee;
border : 1px solid #AAAAAA;
width: 586px;
float:left;
}


.content_right .ad {
margin-bottom:10px;
width:586px;
height:150px;
overflow:hidden;
position:relative;
}

.content_right .slider,
.content_right .num {
position:absolute;
}

.content_right .slider li{
list-style:none;
display:inline;
}

.content_right .slider img{
width:586px;
height:150px;
display:block;
}
.content_right .num{
right:5px;
bottom:5px;
}
.content_right .num li{
float: left;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-family: Arial;
font-size: 12px;
color: #FF7300;
background-color: #fff;
border: 1px solid #FF7300;
overflow: hidden;
margin: 3px 1px;
cursor: pointer;
}
.content_right .num li.on{
width: 21px;
height: 21px;
line-height: 21px;
color: #fff;
background-color: #FF7300;
font-size: 16px;
margin: 0 1px;
border: 0;
font-weight: bold;
}