jquery特效幻灯片效果示例代码

　　jquery特效幻灯片效果，效果图如下：

jquery特效幻灯片效果示例代码

复制代码代码如下:

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>jquery特效</title>

　　<style>

　　/* CSS Document */

　　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;font-size:12px;vertical-align:middle;}

　　body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0 auto; }

　　table{border-collapse:collapse;border-spacing:0;}

　　a{ color:#333; text-decoration:none;}

　　.box{ width:420px; margin:20px auto; position:relative; overflow:hidden; text-align:left;}

　　.box img{border:0px; width:420px;}

　　.big{ width:100%; float:left; height:196px; overflow:hidden; margin-bottom:2px;}

　　.big a{ display:none;}

　　.big span{ position:absolute; left:0; top:167px; font-size:13px; color:#fff; z-index:11; height:30px; line-height:30px; text-indent:1em; width:100%; )}

　　.num{ width:424px; margin-right:-24px; float:left; height:53px; padding-top:2px;}

　　.num li{ width:99px; padding-top:5px; padding-left:1px; cursor:pointer; float:left; margin-right:6px;height:48px;}

　　.num img{ width:98px;}

　　.num li.on{ background:url(../images/bg01.gif) no-repeat 0 0;}

　　.txtbg{ position:absolute; left:0; top:167px; width:100%; height:30px; background:#000; opacity:0.5;filter:alpha(opacity=50); z-index:10;}

　　</style>

　　var timer;

　　var i=-1;

　　var offset=3000;

　　function roll(){

　　i++;

　　if(i>3){

　　i=0;

　　}

　　slide(i);

　　timer=setTimeout(roll,offset)

　　}

　　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(roll,offset);

　　});

　　}

　　function stoproll(){

　　$('.num li').hover(function(){

　　clearTimeout(timer);

　　i=$(this).index();

　　slide(i);

　　},function(){

　　timer=setTimeout(roll,offset);

　　})

　　}

　　$(function(){

　　roll();

　　stoproll();

　　stopBig()

　　})

　　</script>

　　</head>

　　<body>

　　</div>

　　</ul>

　　</div>

　　</body>

　　</html>

教程首页更多教程

jquery特效 幻灯片效果示例代码

jquery特效幻灯片效果示例代码