免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 分享资源 > 文章正文

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

时间:02-24 13:47 来源:张自云(朋)的博客 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  这是在pcbeata上面提取的滑动幻灯片脚本,本次提供的这一款点击上下滑动的jquery脚本,可以在wordpress中动态调用日志标题,具体效果请看示例代码,具体使用请修改css代码

这是在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> 

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

原文来自:http://www.icdiary.com/html/2189.html

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,jquery幻灯片脚本点击上下滑动对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与jquery幻灯片脚本点击上下滑动无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈