Code

SlideShow javascript jquery plugin
图片切换效果为slide
鼠标放到右下角的数字小图标上即可切换图片。
效果预览
  • 1
  • 2
  • 3
  • 4
代码
1.在body里加入如下HTML代码：

<div class="changeBox_a1" id="change_3">
    <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>
    <ul class="ul_change_a2">
        <li><span>1</span></li>
        <li><span>2</span></li>
        <li><span>3</span></li>
        <li><span>4</span></li>
    </ul>
</div>
2.在head标签内加入css：

<style type="text/css">
    .changeBox_a1
    {
        width:650px;
        height:250px; 
        padding:2px;
        position:relative;
        border:1px solid #aaa; 
    }
    .changeBox_a1 .a_bigImg
    {
    	position:absolute;
        top:2px;
        left:2px;
        display:none;
    }
    /* ul_change_a2 */
    .ul_change_a2
    {
        position:absolute;
        right:5px;
        bottom:7px;
        padding-left:19px;
        overflow:hidden;
    }
    .ul_change_a2 li
    {
        display: -moz-inline-stack;
        display:inline-block;
        *display:inline;
        *zoom:1;
    }
    .ul_change_a2 span
    {
        display: -moz-inline-stack;
        display:inline-block;
        *display:inline;
        *zoom:1;
        padding:0px 3px; 
        margin-right:2px;
        border:1px solid #999;
        background:#fff;
        filter:alpha(opacity=85);
        opacity:0.85;
        cursor:hand;
        cursor:pointer;
    }
    .ul_change_a2 span.on
    {
        border:1px solid #CC0000;
        background:#FFFF9D;
        color:#CC0000;
    }
</style>
3.在head里引入js文件：

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.soChange.js" type="text/javascript"></script>
4.继续在head里加入js代码：

<script type="text/javascript">
    $(function() {
        //定义对象切换方式为slide
        $('#change_3 .a_bigImg').soChange({
            thumbObj: '#change_3 .ul_change_a2 span',
            thumbNowClass: 'on', //自定义导航对象当前class为on
            changeType:'slide',//定义对象切换方式为slide
            changeTime: 4000//自定义切换时间为4000ms
        });
    })
</script>
5.参数列表：
参数名 默认值 说明
thumbObj null 导航对象，默认为空
botPrev null 按钮上一个，默认为空
botNext null 按钮下一个。默认为空
changeType 'fade' 切换方式，可选：fade,slide，默认为fade
thumbNowClass 'now' 导航对象当前的class,默认为now
thumbOverEvent true 鼠标经过thumbObj时是否切换对象，默认为true，为false时，只有鼠标点击thumbObj才切换对象
slideTime 1000 平滑过渡时间，默认为1000ms，为0或负值时，忽略changeType方式，切换效果为直接显示隐藏
autoChange true 是否自动切换
clickFalse true 导航对象如果有链接，点击是否链接无效，即是否返回return false，默认是return false链接无效，当thumbOverEvent为false时，此项必须为true，否则鼠标点击事件冲突
overStop true 鼠标经过切换对象时，切换对象是否停止切换，并于鼠标离开后重启自动切换，前提是已开启自动切换，默认开启鼠标经过对象停止切换
changeTime 5000 对象自动切换时间，默认为5000ms，即5秒
delayTime 300 鼠标经过时对象切换迟滞时间，推荐值为300ms
Drew Wilson Network