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

更新时间：2013年07月16日 17:57:56 作者：

jquery特效中的幻灯片想必大家已不陌生吧，下面为大家分享个比较不错的幻灯片效果，附有源码，感兴趣的朋友可以学习下哈

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

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf8" /> 
<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> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript"> 
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 class="box"> 
<div class="txtbg">&nbsp;</div> 
<div class="big"> 
<a href="#" style="display:block"><img src="images/1.jpg" /><span>标题1</span></a> 
<a href="#"><img src="images/2.jpg" /><span>标题2</span></a> 
<a href="#"><img src="images/3.jpg" /><span>标题3</span></a> 
<a href="#"><img src="images/4.jpg" /><span>标题4/span></a> 
</div> 
<ul class="num"> 
<li class="on"><img src="images/1s.jpg" /></li> 
<li><img src="images/2s.jpg" /></li> 
<li><img src="images/3s.jpg" /></li> 
<li><img src="images/4s.jpg" /></li> 
</ul> 
</div> 
</body> 
</html> 

您可能感兴趣的文章:

ajax异步请求详解
做前端开发的朋友对于ajax异步更新一定印象深刻，本文主要介绍了关于ajax异步请求的那点事，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
jQuery替换节点元素的操作方法
这篇文章通过实例代码给大家讲解了jquery替换节点元素的操作方法及动态页面的实现代码，非常不错，需要的朋友参考下吧
2018-03-03
jquery+css实现Tab栏切换的代码实例
这篇文章主要介绍了jquery css实现Tab栏切换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
JQuery循环滚动图片代码
每次滚动的长度不要固定死，可以直接获取图片宽度作为滚动的长度。这样当你的网站有很多地方需要这个效果的时候一个函数就可以搞定了
2011-12-12
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
本文介绍Jquery下的Ajax调试方法,Jquery Ajax 提供了全功能的 $.ajax() 方法，还有诸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更为简便的方法
2013-12-12
jquery validate poshytip 自定义样式
项目中做了一个jquery.validate气泡提示在新版的jquery.validate中，有这个功能，但在我这里不怎么好用，所以自己加了一个，找了一些插件qtip2的样式不错，需要的朋友可以参考下
2012-11-11
jquery处理页面弹出层查询数据等待操作实例
这篇文章主要介绍了jquery处理页面弹出层查询数据等待操作,实例分析了jquery实现等待效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
jquery获取html元素的绝对位置和相对位置的方法
这篇文章主要介绍了jquery获取html元素的绝对位置和相对位置的方法,需要的朋友可以参考下
2014-06-06
JQuery解析XML的方法小结
这篇文章主要介绍了JQuery解析XML的方法,总结分析了常用的jQuery解析xml文件的相关技巧,需要的朋友可以参考下
2016-04-04
JQuery点击行tr实现checkBox选中的简单实例
下面小编就为大家带来一篇JQuery点击行tr实现checkBox选中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05