这是在pcbeata上面提取的滑动幻灯片脚本，本次提供的这一款点击上下滑动的jquery脚本，可以在wordpress中动态调用日志标题，具体效果请看示例代码，具体使用请修改css代码。

效果演示：

1，加载jquery.js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

2，添加以下js代码。

<script type="text/javascript">   
$(document).ready(function(){   
$('.pt_rtsb li a.text').click(function() {   
    if ($(this).parent().hasClass('curr')) {   
        return false;   
    }   
    $('.pt_rtsb li.curr img').fadeOut();   
    $('.pt_rtsb li.curr').removeClass('curr');   
    $('.pt_rtsb li').stop().animate({   
        'height': 40  
    });   
    $(this).parent().stop().addClass('curr').animate({   
        'height': 227  
    });   
    $('.pt_rtsb li.curr img').fadeIn();   
    return false;   
});   
});   
</script> 

3，添加css样式表。

<style type="text/css">     
ul,ol,li {   
    margin:0;   
    padding:0;   
}   
.pt_rtsb {   
    width:300px;   
    height:350px;   
    overflow:hidden;   
}   
.pt_rtsb li.curr {   
    }.pt_rtsb li {   
    position:relative;   
    margin - bottom:0;   
    border - bottom:1px solid white;   
    background:#009AD9;   
}   
.pt_rtsb li {   
    margin-bottom:1px;   
    height:40px;   
    background:# 59A3F0;   
}   
.pt_rtsb li img {   
    display:none;   
    width:300px;   
    height:227px;   
}   
a img {   
    border:none;   
}   
.pt_rtsb li.curr a.text {   
    background:black;   
}   
.pt_rtsb li a.text {   
    position:absolute;   
    left:0;   
    bottom:0;   
    width:100%;   
    height:40px;   
    line-height:40px;   
    text-align:center;   
    color:white;   
    font-size:14px;   
    overflow:hidden;   
    opacity:0.8;   
}   
.pt_rtsb li a.text {   
    background:#009AD9;   
    width:300px;   
}   
a:hover,* a:hover {   
    color:# F60!important;   
}   
a:hover,* a:hover {   
    color:#F60!important;   
}   
a:hover {   
    text - decoration:none;   
}   
a {   
    color:#333;   
    text-decoration:none;   
}   
ul li,.xl li {   
    list-style:none;   
    margin:0;   
    padding:0;   
    display:list-item;   
    text-align:-webkit-match-parent;   
}   
</style> 

4，通用html格式调用。

<ul class="pt_rtsb">   
    <li style="height: 227px; overflow-x: hidden; overflow-y: hidden; " class="curr">   
        <a href="#" class="thumb">   
            <img src="1.jpg" style="display: inline; ">   
        </a>   
        <a href="#" class="text">   
            A   
        </a>   
    </li>   
    <li style="height: 40px; overflow-x: hidden; overflow-y: hidden; " class="">   
        <a href="#" class="thumb">   
            <img src="2.jpg" style="display: none; ">   
        </a>   
        <a href="#" class="text">   
            B   
        </a>   
    </li>   
    <li style="height: 40px; overflow-x: hidden; overflow-y: hidden; " class="">   
        <a href="#" class="thumb">   
            <img src="3.jpg" style="display: none; ">   
        </a>   
        <a href="#" class="text">   
            C   
        </a>   
    </li>   
    <li class="last" style="height: 40px; overflow-x: hidden; overflow-y: hidden; ">   
        <a href="#" class="thumb">   
            <img src="4.jpg" style="display: none; ">   
        </a>   
        <a href="#" class="text">   
            D   
        </a>   
    </li>   
</ul> 

效果示例代码下载：http://www.icdiary.com/?dl_name=Jquery_slide.zip