jQuery个人介绍幻灯片

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

分类：图片代码 > 图片轮播难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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.sucaihuo.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);
});