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>
