对jquery没有深入研究过，只是怎么简单怎么来，符合自己的需求即可。以下是代码。
使用的是ThinkPHP框架，图片等是循环出来的，下面是模板中的代码：
<div id="rotation"> <volist name="banner" id="vo"> ?? <div mid="{$i}"> ????? <a href=""><img alt="" src="__PUBLIC__/images/post{$i}.jpg"></a> ????????<span>{$vo.title}</span> ?????</div>
</volist>
<ul id="banner-button"> ?? <volist name="banner" id="vo"> ????? <li mid="{$i}">·</li> ?????</volist> ??</ul>
</div>在HTML中是这样：
<div id="rotation"> ???<div mid="1"> ???????<a href=""><img alt="" src="/images/post1.jpg"></a> ???????<span>标题</span> ???</div> ???<div mid="2"> ???????<a href=""><img alt="" src="/images/post2.jpg"></a> ???????<span>标题</span> ???</div> ???<div mid="3"> ???????<a href=""><img alt="" src="/images/post3.jpg"></a> ???????<span>标题</span> ???</div> ???<div mid="4"> ???????<a href=""><img alt="" src="/images/post4.jpg"></a> ???????<span>标题</span> ???</div> ???<ul id="banner-button"> ???????<li mid="1">·</li> ?// 这些是点击按钮切换到对应数字的图片 ???????<li mid="2">·</li> ???????<li mid="3">·</li> ???????<li mid="4">·</li> ???</ul></div>
CSS代码：
#rotation { ???width: 669px; ???padding: 10px 10px 0 10px; ???border: 1px solid #ccc; ???margin-bottom: 3em; ???box-shadow: 5px 5px 5px #ccc; ???background: #fff; ???position: relative;}#rotation a { ???height: 309px; ???overflow: hidden; ???display: inline-block;}#rotation img { ???width: 100%; ???height: 100%;}#rotation span { ???padding: 10px 0; ???padding-left: 15px; ???font-size: 18px; ???margin: 0; ???color: #666; ???cursor: default; ???display: inline-block;}span#tip2, span#tip3 { ???display: none;}#img2, #img3 { ???display: none;}#rotation ul { ???display: inline-block; ???cursor: default; ???position: absolute; ???bottom: 0; ???right: 10px;}#rotation ul li { ???display: inline; ???color: #666; ???font-size: 3em; ???line-height: 38px; ???cursor: pointer;}#rotation ul li.active { ???color: #bbb;}jquery代码：
var t = button_id = 0, count;$(document).ready(function(){ ???$(‘#rotation div:not(:first)‘).hide(); ?// 隐藏除了第一个的其他图片 ???$(‘#rotation ul li:first‘).addClass(‘active‘); ?// 给按钮加上样式 ???count = $(‘#rotation div‘).length; ?// 计算总数 ???$(‘#banner-button li‘).click(function(){ ???????button_id = $(this).attr(‘mid‘)-1; ?// 点击的是第几个按钮 ???????if ($(‘#rotation div:visible‘).attr(‘mid‘) != button_id+1){ // 排除正在展示的图片按钮被点击 ???????????$(‘#rotation div‘).filter(":visible").hide().parent().children().eq(button_id).fadeIn(1000); ?// 隐藏可见的div并显示对应的div ???????????$(this).toggleClass("active"); ?// 给按钮增加样式 ???????????$(this).siblings().removeAttr("class"); ?// 移除之前的样式 ???????} ???});
???t = setInterval("show_bann()", 4000); ?// 自动执行
$(‘#rotation‘).hover(function(){
??? clearInterval(t);
??? },function(){
??? t = setInterval("show_bann()", 4000);
??? });
});function show_bann(){ ???button_id = button_id >=(count -1) ?0 : ++button_id; ???$("#banner-button li").eq(button_id).trigger(‘click‘);}下面是完成后的样子，图片和字每4秒更换，如果鼠标放在上面会取消计时函数，移走后重新计时。
jquery 幻灯片效果
原文地址：http://www.cnblogs.com/Anselst-Blog/p/7822605.html