qinyi素材网
当前位置: 首页 > jQuery素材 > 幻灯片插件soChange
  时间: 2021-11-12   阅读:1.06k

插件介绍

soChange是一款基于jQuery的对象切换插件,源对象为自动切换的一个数组,即其本身,非其父包装元素,如要切换图片本身就以图片组为对象,如要切换层就以层组为对象。

简要教程

soChange是一款基于jQuery的对象切换插件,源对象为自动切换的一个数组,即其本身,非其父包装元素,如要切换图片本身就以图片组为对象,如要切换层就以层组为对象。

使用方法

在HTML中引入jQuery.jssoChange的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图进过加速处理

更多

更多幻灯片轮播效果请参考下载内容

上一篇: 下一篇: