jQuery个人介绍幻灯片

收藏

分享一个左右按钮控制的焦点轮播，你可以放置商品介绍、个人信息介绍、或者你的产品信息介绍。jQuery效果不错，赶紧收藏吧，说不定以后用到呢。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先在#four_flash放置个人信息列表li，和左右按钮.but_left，.but_right

<div id="four_flash">
    <div class="flashBg">
        <ul class="mobile">
            <li>
                <img src="images/senke_xy00.jpg" />
            <dd>高同学</dd>
            <p>2013年CPA暑期班学员，一年通过5门课程</p>
            <a href=""></a>
            </li>
            <li>
                <img src="images/senke_xy01.jpg" />
            <dd>李同学</dd>
            <p>2014年CPA周末旗舰班学员；1年通过4门课程</p>
            <a href="http://www.erdangjiade.com/js"></a>
            </li>
    </ul>
    </div>
    <div class="but_left"><img src="images/qianxleft.png" /></div>
    <div class="but_right"><img src="images/qianxr.png" /></div>
</div>

jQuery

var _index5 = 0;
$("#four_flash .but_right img").click(function() {
    _index5++;
    var len = $(".flashBg ul.mobile li").length;
    if (_index5 + 5 > len) {
        $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html());
    }
    $("#four_flash .flashBg ul.mobile").stop().animate({left: -_index5 * 326}, 1000);
});


$("#four_flash .but_left img").click(function() {
    if (_index5 == 0) {
        $("ul.mobile").prepend($("ul.mobile").html());
        $("ul.mobile").css("left", "-1380px");
        _index5 = 6
    }
    _index5--;
    $("#four_flash .flashBg ul.mobile").stop().animate({left: -_index5 * 326}, 1000);
});