jquery幻灯片脚本点击上下滑动

2013-04-18 0人评论 705次浏览分类：Js/Jquery特效

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

效果演示：

jquery点击滑动幻灯片脚本

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>