基于jQuery的幻灯插件:中等级封装类sGallery 1.0
基于jQuery的幻灯插件:中等级封装类sGallery 1.0，非常漂亮，欢迎大家学习和转载，请注意保留作者的博客地址，尊重作者劳动成果！所有参数：
$(obj).sGallery({
thumbObj:null, //导航对象，默认为空
botLast:null, //按钮上一个，默认为空
botNext:null, //按钮下一个。默认为空
thumbNowClass:'now', //导航对象当前的class,默认为now
slideTime:1000, //对象平滑过渡持续时间，默认为1000ms
autoChange:true, //是否自动切换，默认为true
changeTime:5000, //对象自动切换时间，默认为5000ms，即5秒
delayTime:300 //鼠标经过时反应的延迟时间，推荐值为300ms
});
以上为此插件所有参数，从前端开发角度出发，充分利用css样式的灵活性，脚本调用方式简单，
基本满足了现在常见开发中遇到的平滑过渡效果，具体实际应用及代码参考以下的例子。
注：此插件大小为3k(min版为2k)，兼容全部主流浏览器，
图片右上方的小箭头图标考虑美观用了透明的png图片，在ie6下不透明，此和样式有关，请详知。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-CN" />
<title>基于jQuery的幻灯插件：中等级封装类sGallery 1.0 - liehuo.net</title>
<link rel="stylesheet" type="text/css" media="all" href="" />
<script type="text/javascript" src="/uploads/Common/jquery-1.3.2.min.js"></script>
<script src="/uploads/Common/jquery.sGallery-min.js" type="text/javascript"></script>
<style>
/* base yui reset.css, repair by haven long 090925*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;}table{border-collapse:collapse;border-spacing:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}ins{text-decoration:none;}del{text-decoration:line-through;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}.clear{height:0;font-size:0;line-height:0;clear:both;}
html{color:#000;background:#fff;}
body{
font-size:0.75em;
background:#fff;
font-family:Verdana, Tahoma,Arial,Helvetica, sans-serif;
text-align:center;
color:#444;
}
a{
text-decoration:none;
color:#444;
}
a:hover{color:#B70000;}
/* end of reset.css */
/*all base*/
#wrapper{
position:relative;
width:990px;
margin:0 auto;
text-align:left;
overflow:hidden;}
h1{font-size:1.17em;text-align:center; margin:20px; }
h1 .strong{color:#CC0000;margin-left:3px;font-size:1.3em;}
.allIntro{
border:1px solid #ccc;
margin:10px 0;
padding:15px;
background:#eee;
line-height:1.7em; }
.p_other{
font-size:1.17em;
margin:20px 0 10px; }
.p_author{
font-size:1.17em;
text-align:right;
margin:0 10px 10px; }
.p_author a{
color:#cc0000;
text-decoration:underline; }
.p_author a:hover{text-decoration:none;}
.eachBox{
overflow:hidden;
clear:both;
padding:15px 0; }
.introArea{
float:left;
margin-left:20px;
display:inline;
width:300px;
line-height:1.7em; }
.introArea h2{
font-size:1.17em;
padding:5px 0 10px;
color:#CC0000;}
.green{color:green;}
.blue,code{
font-size:1em;
color:blue;
font-family:Verdana;}
/* scrollBox_a1 */
.scrollBox_a1{
float:left;
width:650px;height:250px;
padding:2px;
position:relative;
border:1px solid #aaa; }
.scrollBox_a1 .a_bigImg img{
position:absolute;
top:2px;left:2px;
display:none;}
.changeDiv{
position:absolute;
top:2px;left:2px;
display:none;}
.changeDiv h3{
position:absolute;
left:0px;bottom:0;
width:650px;
height:30px;line-height:30px;
background:#fff;
filter:alpha(opacity=70);
opacity:0.7;}
.changeDiv h3 a{
display:block;
padding-left:15px;
color:#FF6600;}
/* ul_scroll_a1 */
.ul_scroll_a1{
position:absolute;
right:1px; bottom:6px;
padding-left:19px;
overflow:hidden;}
.ul_scroll_a1 li{
float:left;
margin-right:7px; }
.ul_scroll_a1 img{ border:1px solid #ddd;}
.ul_scroll_a1 img.now{border:1px solid #FF6600;}
.a_last,.a_next{
position:absolute;
top:10px;
width:16px;height:16px;
background:url(/uploads/Common/images/bot.png) no-repeat;
text-indent:-999em;overflow:hidden;}
.a_last{right:30px;background-position:0 0;}
.a_next{right:12px;background-position:100% 0;}
/* ul_scroll_a2 */
.ul_scroll_a2{
position:absolute;
right:5px; bottom:7px;
padding-left:19px;
overflow:hidden;
}
.ul_scroll_a2 li{
display: -moz-inline-stack;
display:inline-block;
*display:inline;
*zoom:1;}
.ul_scroll_a2 span{
display: -moz-inline-stack;
display:inline-block;
*display:inline;
*zoom:1;
font-size:0.8em;
padding:0px 3px;
margin-right:2px;
border:1px solid #999;
background:#fff;
filter:alpha(opacity=85);
opacity:0.85;
cursor:hand;
cursor:pointer;
}
.ul_scroll_a2 span.on{
border:1px solid #CC0000;
background:#FFFF9D;
color:#CC0000;}
</style>
</head>
<body>
<div id="wrapper">
<b>如不能正常显示，请按F5刷新！</b>
<!-- 1 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_1">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
</div>
<div class="introArea">
<h2>//默认最简易模式</h2>
<p class="p_code"><code>$('#scroll_1 .a_bigImg img').sGallery();</code></p>
<p class="green">
//最简易模式不带任何参数，即直接切换选择器选择的对象组，所有参数为默认：隔5秒自动切换，图片过渡效果持续1秒
//源对象为自动切换的一个数组，即其本身，非其父包装元素
//如要切换图片本身就以图片组为对象，
//如要切换层就以层组为对象</p>
</div>
</div>
<!-- 2 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_2">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
<a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a>
</div>
<div class="introArea">
<h2>//带前后按钮</h2>
<p class="p_code">
<code>$('#scroll_2 .a_bigImg img').sGallery({
botLast:'#scroll_2 .a_last', <span class="green">// 按钮，上一个</span>
botNext:'#scroll_2 .a_next' <span class="green">// 按钮，下一个</span>
});</code></p>
</div>
</div>
<!-- 3 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_3">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
<ul class="ul_scroll_a2">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ul>
</div>
<div class="introArea">
<h2>//使用数字导航切换及自定义当前状态数字的class</h2>
<p class="p_code">
<code>$('#scroll_3 .a_bigImg img').sGallery({
thumbObj:'#scroll_3 .ul_scroll_a2 span',
<span class="green">//导航为数字形式，选择器指向包含数字的span对象</span>
thumbNowClass:'on',
<span class="green">//自定义导航对象当前class为on</span>
changeTime:4000<span class="green">//自定义切换时间为4000ms</span>
});</code></p>
</div>
</div>
<!-- 32 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_32">
<div class="changeDiv">
<h3><a href="#">图片111111111说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3>
<a href="#1"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a></div>
<div class="changeDiv">
<h3><a href="#">图片222222222说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3>
<a href="#2"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a></div>
<div class="changeDiv">
<h3><a href="#">图片333333333说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3>
<a href="#3"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a></div>
<div class="changeDiv">
<h3><a href="#">图片444444444说明文字，文字标题都绝对定位在div.changeDiv这个层内</a></h3>
<a href="#4"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a></div>
<ul class="ul_scroll_a2">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ul>
</div>
<div class="introArea">
<h2>//切换对象为其他，这里为包含图片和标题的层</h2>
<p class="p_code">
<code>$('#scroll_32 div.changeDiv').sGallery({
<span class="green">对象指向层，层内包含图片及标题</span>
thumbObj:'#scroll_32 .ul_scroll_a2 span',
thumbNowClass:'on',
});</code></p>
</div>
</div>
<!-- 4 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_4">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
<a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a>
<ul class="ul_scroll_a1">
<li><a href="#"><img src="/uploads/Common/images/1_s.jpg" width="67" height="40" alt="" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/2_s.jpg" width="67" height="40" alt="" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/3_s.jpg" width="67" height="40" alt="" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/4_s.jpg" width="67" height="40" alt="" /></a></li>
</ul>
</div>
<div class="introArea">
<h2>//带导航图标及按钮</h2>
<p class="p_code">
<code>$('#scroll_4 .a_bigImg img').sGallery({
thumbObj:'#scroll_4 .ul_scroll_a1 img',
<span class="green">//导航图标，选择器直接指向图标对象</span>
botLast:'#scroll_4 .a_last',
botNext:'#scroll_4 .a_next'
});</code></p>
</div>
</div>
<!-- 5 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_5">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="" /></a>
<a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a>
<ul class="ul_scroll_a1">
<li><a href="#"><img src="/uploads/Common/images/1_s.jpg" width="67" height="40" alt="" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/2_s.jpg" width="67" height="40" alt="" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/3_s.jpg" width="67" height="40" alt="" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/4_s.jpg" width="67" height="40" alt="" /></a></li>
</ul>
</div>
<div class="introArea">
<h2>//不自动切换</h2>
<p class="p_code">
<code>$('#scroll_5 .a_bigImg img').sGallery({
thumbObj:'#scroll_5 .ul_scroll_a1 img',
<span class="green">//导航图标，选择器直接指向图标对象</span>
botLast:'#scroll_5 .a_last',
botNext:'#scroll_5 .a_next',
autoChange:false<span class="green"> //自动切换为 false，默认为true </span>
});</code></p>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
//源对象为自动切换的一个数组，即其本身，非其父包装元素
//如要切换图片本身就以图片组为对象，
//如要切换层就以层组为对象
//默认最简易模式
$('#scroll_1 .a_bigImg img').sGallery();
//带前后按钮
$('#scroll_2 .a_bigImg img').sGallery({
botLast:'#scroll_2 .a_last',//按钮，上一个
botNext:'#scroll_2 .a_next'//按钮，下一个
});
//数字导航切换及自定义当前数字的class
$('#scroll_3 .a_bigImg img').sGallery({
thumbObj:'#scroll_3 .ul_scroll_a2 span',
thumbNowClass:'on',//自定义导航对象当前class为on
changeTime:4000//自定义切换时间为4000ms
});
//切换对象为其他，这里为包含图片和标题的层
$('#scroll_32 div.changeDiv').sGallery({//对象指向层，层内包含图片及标题
thumbObj:'#scroll_32 .ul_scroll_a2 span',
thumbNowClass:'on'//自定义导航对象当前class为on
});
//带导航图标及按钮
$('#scroll_4 .a_bigImg img').sGallery({
thumbObj:'#scroll_4 .ul_scroll_a1 img',//导航图标
botLast:'#scroll_4 .a_last',
botNext:'#scroll_4 .a_next'
});
//不自动切换
$('#scroll_5 .a_bigImg img').sGallery({
thumbObj:'#scroll_5 .ul_scroll_a1 img',
botLast:'#scroll_5 .a_last',
botNext:'#scroll_5 .a_next',
autoChange:false//自动切换为 false，默认为true
});
});
</script>
</body>
</html>
<center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
演示：
http://www.veryhuo.com/a/view/11031.html
页:
[1]