存档

文章标签 ‘切换’

利用jQuery轻松实现简介信息切换

2009年11月12日 IT北瓜 2 条评论

      刚刚群里的一位群友问我如何显示http://www.sunkang.net/lecturecon.asp（PS：他正在做的网站）上下图区域中

如何实现点击右边的小箭头实现不同医生简介信息的切换，于是花了几分钟帮他写了一下实现（PS：由于他给的html代码没有箭头部分，所以Leeo用来一个按钮来代替，同时这里也不考虑美工问题），具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片切换</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style>
/* picchange */
.picchange {
    padding: 4px 0;
    padding-left: 10px;
}
.picchange img {
    margin: 9px 0 4px 1px;
    float:left;
}
.piccontent {
    float: left;
    margin: 7px 0 0 0;
    line-height: 18px;
    width: 250px;
    padding-left: 10px;
}
.piccontent strong {
    font-size: 14px;
    color: #3b7dd8;
}
#btn {
    cursor: pointer;
}
.info-hide {
    display: none;
}
.info-show {
    display: block;
}
</style>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    //获取所有医生介绍信息的div对象
    var $doctorInfo = $('#doctorInfo_container .piccontent');

    //绑定按钮点击事件
    $('#btn').click(function(){
        //获取当前显示项的对象
        var $nowDoctorInfoObj = $doctorInfo.filter('.info-show');
        //获取当前显示项的index
        var _index = $doctorInfo.index($nowDoctorInfoObj);
        //假如_index > 4 则让_index = 0
        _index = _index + 1 > 4 ? 0 : _index + 1;
        //改变等强项的class
        $nowDoctorInfoObj.removeClass("info-show").addClass("info-hide");
        //切换到下一项，如果是最后一项则切换到第一项
        $doctorInfo.eq(_index).removeClass("info-hide").addClass("info-show");
    });
});
</script>
</head>

<body>
    <div class="picchange clearfix" id="doctorInfo_container">
        <img src="images/pic/1.gif" alt="">
        <div class="piccontent info-show" id="picq01"><strong>张曜宇11</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <img src="images/pic/2.gif" alt="">
        <div class="piccontent info-hide" id="picq02"><strong>张曜宇22</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <img src="images/pic/2.gif" alt="">
        <div class="piccontent info-hide" id="picq03"><strong>张曜宇33</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <img src="images/pic/2.gif" alt="">
        <div class="piccontent info-hide" id="picq04"><strong>张曜宇44</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <img src="images/pic/2.gif" alt="">
        <div class="piccontent info-hide" id="picq05"><strong>张曜宇55</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div>
        <span id="scrollbtn"></span>
        <input type="button" id="btn" value="点击切换"  />
    </div>
</body>
</html>

在线DEMO…

分类: jQuery, 应用实例 标签: , ,