软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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幻灯片脚本点击上下滑动无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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