soChange是一款基于jQuery的对象切换插件,源对象为自动切换的一个数组,即其本身,非其父包装元素,如要切换图片本身就以图片组为对象,如要切换层就以层组为对象。
使用方法
在HTML中引入jQuery.js和soChange的CSS和JS
<link rel="stylesheet" type="text/css" media="all" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.soChange-min.js" type="text/javascript"></script>
简易模式
简易模式不带任何参数,即直接切换选择器选择的对象组,所有参数为默认:隔5秒自动切换,图片过渡效果持续1秒
HTML代码
<div class="eachBox">
<div class="changeBox_a1" id="change_1">
<a href="#1" class="a_bigImg"><img src="images/1.jpg" width="650" height="250" alt="" /></a>
<a href="#2" class="a_bigImg"><img src="images/2.jpg" width="650" height="250" alt="" /></a>
<a href="#3" class="a_bigImg"><img src="images/3.jpg" width="650" height="250" alt="" /></a>
<a href="#4" class="a_bigImg"><img src="images/4.jpg" width="650" height="250" alt="" /></a>
</div>
JavaScript代码
$('#change_1 .a_bigImg').soChange();
带导航图标及按钮
HTML代码
<div class="eachBox">
<div class="changeBox_a1" id="change_4">
<a href="#1" class="a_bigImg"><img src="images/1.jpg" width="650" height="250" alt="" /></a>
<a href="#2" class="a_bigImg"><img src="images/2.jpg" width="650" height="250" alt="" /></a>
<a href="#3" class="a_bigImg"><img src="images/3.jpg" width="650" height="250" alt="" /></a>
<a href="#4" class="a_bigImg"><img src="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_change_a1">
<li><a href="#"><img src="images/1_s.jpg" width="67" height="40" alt="" /></a></li>
<li><a href="#"><img src="images/2_s.jpg" width="67" height="40" alt="" /></a></li>
<li><a href="#"><img src="images/3_s.jpg" width="67" height="40" alt="" /></a></li>
<li><a href="#"><img src="images/4_s.jpg" width="67" height="40" alt="" /></a></li>
</ul>
</div>
JavaScript代码
$('#change_4 .a_bigImg').soChange({
thumbObj:'#change_4 .ul_change_a1 img',//导航图标
botPrev:'#change_4 .a_last',
botNext:'#change_4 .a_next'
});
演示效果
下面gif图进过加速处理
更多
更多幻灯片轮播效果请参考下载内容