Code

带导航图标及按钮

鼠标经过右下角的小图片,或者点击右上角的左右小按钮,都可以切换图片。

大图片命名格式:demo.jpg

小图片命名格式:demo_s.jpg

(小图片的名称是在大图片的名称上加"_s")

效果预览
代码
1.在body里加入如下HTML代码:

<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>

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;
    }
    .a_last,.a_next
    {
        position:absolute;
        top:10px;
        width:16px;
        height:16px;
        background:url(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_change_a1 */
    .ul_change_a1
    {
        position:absolute;
        right:1px;
        bottom:6px;
        padding-left:19px;
        overflow:hidden;
    }

    .ul_change_a1 li
    {
        float:left;
        margin-right:7px;
    }
    .ul_change_a1 img
    {
    	border:1px solid #ddd;
    }
    .ul_change_a1 img.now
    {
    	border:1px solid #FF6600;
    }
</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() {
        //带导航图标及按钮
          $('#change_4 .a_bigImg').soChange({
            thumbObj: '#change_4 .ul_change_a1 img', //导航图标
               botPrev: '#change_4 .a_last',
            botNext: '#change_4 .a_next',
            autoChange: true//设置为 false 关闭自动切换,默认为true
        });
    })
</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