最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

jQuery个人介绍幻灯片

来源:http://www.erdangjiade.com/ 二当家的 2015-08-20 17:45浏览(1613)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery个人介绍幻灯片
分类:图片代码 > 图片轮播 难易:中级
查看演示 下载资源: 122

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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);
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/420.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    06-14 18:53
    15118873459
    可以的,准备拿来参考参考
1 2