熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jquery特效 幻燈片效果示例代碼

2013-11-15 12:04:01  來源: JSP教程 
jquery特效中的幻燈片想必大家已不陌生吧下面為大家分享個比較不錯的幻燈片效果附有源碼感興趣的朋友可以學習下哈  

  jquery特效 幻燈片效果效果圖如下
 

復制代碼 代碼如下:

  
<!DOCTYPE html>
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>jquery特效</title>
<style>
/* CSS Document */
bodyhhhhhhpulolliformimgdldtddtablethtdblockquotefieldsetdivstronglabelem{margin:;padding:;border:;}
ulolli{liststyle:none;}
inputbutton{margin:;fontsize:px;verticalalign:middle;}
body{fontsize:px;fontfamily:Arial Helvetica sansserif; textalign:center; margin: auto; }
table{bordercollapse:collapse;borderspacing:;}
a{ color:#; textdecoration:none;}
box{ width:px; margin:px auto; position:relative; overflow:hidden; textalign:left;}
box img{border:px; width:px;}
big{ width:%; float:left; height:px; overflow:hidden; marginbottom:px;}
big a{ display:none;}
big span{ position:absolute; left:; top:px; fontsize:px; color:#fff; zindex:; height:px; lineheight:px; textindent:em; width:%; )}
num{ width:px; marginright:px; float:left; height:px; paddingtop:px;}
num li{ width:px; paddingtop:px; paddingleft:px; cursor:pointer; float:left; marginright:px;height:px;}
num img{ width:px;}
num lion{ background:url(/images/bggif) norepeat ;}
txtbg{ position:absolute; left:; top:px; width:%; height:px; background:#; opacity:;filter:alpha(opacity=); zindex:;}
</style>
<script type="text/javascript" src="js/jqueryminjs"></script>
<script type="text/javascript">
var timer;
var i=;
var offset=;
function roll(){
i++;
if(i>){
i=;
}
slide(i);
timer=setTimeout(rolloffset)
}
function slide(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(){
timer=setTimeout(rolloffset);
});
}
function stoproll(){
$(num li)hover(function(){
clearTimeout(timer);
i=$(this)index();
slide(i);
}function(){
timer=setTimeout(rolloffset);
})
}
$(function(){
roll();
stoproll();
stopBig()
})
</script>
</head>
<body>
<div class="box">
<div class="txtbg"> </div>
<div class="big">
<a href="#" style="display:block"><img src="images/jpg" /><span>標題</span></a>
<a href="#"><img src="images/jpg" /><span>標題</span></a>
<a href="#"><img src="images/jpg" /><span>標題</span></a>
<a href="#"><img src="images/jpg" /><span>標題/span></a>
</div>
<ul class="num">
<li class="on"><img src="images/sjpg" /></li>
<li><img src="images/sjpg" /></li>
<li><img src="images/sjpg" /></li>
<li><img src="images/sjpg" /></li>
</ul>
</div>
</body>
</html>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20204.html
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.