jquery特效 投影片效果範例程式碼_jquery

jquery投影片效果如下，效果圖：
 

複製代碼代碼如下：

代碼如下：


代碼如下：


代碼如下：


代碼如下：


代碼如下：


代碼如下：


碼如下：


>


/* CSS 文件*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl ,dt,dd,table,th,td, blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none ;}
input,button{margin: 0;字體大小：12px;垂直對齊：中間;}
body{字體大小：12px;字體系列：Arial、Helvetica、sans-serif;文字對齊：居中；保證金：0 自動； }
表格{border-collapse:collapse;border-spacing:0;}
a{ color:#333;文字裝飾：無;}
.box{ 寬度：420px;邊距：20px 自動；職位：親屬；溢出：隱藏； text-align:left;}
.box img{border:0px;寬度：420px;}
.big{ 寬度：100%;浮動：左；高度：196 像素；溢出：隱藏；margin-bottom:2px;}
.big a{ 顯示:none;}
.big span{ 位置:absolute;左：0；上：167px；字體大小：13px；顏色：#fff； z 索引：11；高度：30px；行高：30px；文字縮排：1em；寬度：100%； )}
.num{ 寬度:424px;右邊距：- 24px; 浮動：左；高度：53px; padding-top:2px;}
.num li{ width:99px;頂部填充：5px；左內邊距：1px；遊標：指針；浮動：左；margin- right:6px;height:48px;}
.num img{ width:98px;}
.num li.on{ 背景:url(../images/bg01.gif) 不重複0 0 ;}
.txtbg{ 位置：絕對；左：0；上方：167px；寬度：100%；高度：30px；背景：#000；不透明度：0.5；濾鏡：alpha（不透明度=50）；z-index :10;}
;


var 計時器；
var i=-1;
var offset=3000;
函數roll(){
i ;
if(i>3){
i=0;
}
幻燈片(i);
timer=setTimeout(roll,offset)
}
function slip(i){
$(' .big a').eq(i).fadeIn().siblings().hide ();
$('.num li').eq(i).siblings().removeClass('on') ;
$('.num li').eq(i).addClass('on');
}
function stopBig(){
$('.big').hover( function(){
clearTimeout(timer);
},function(){
計時器=setTimeout(滾動,偏移)
});
}
function stoproll( ){
$('.num li').hover(function(){
clearTimeout(timer);
i=$(this).index( );
幻燈片(i)
},function(){
timer=setTimeout(roll,offset);
})
$(function(){
roll();
stoproll()
stopBig()
})
;
頭>

 

標題1 標題2 標題3 標題4/span>

• 
• 
• 
• 

身體>