头像切换封装

最新推荐文章于 2025-09-09 16:55:30 发布

转载最新推荐文章于 2025-09-09 16:55:30 发布 · 86 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/web-leader/p/5524650.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML和JavaScript实现的头像切换功能。通过封装函数的方式，实现了头像图片的左右滑动效果，并详细解释了代码逻辑，包括如何初始化、响应点击事件等。

<div class="ui_avatar">
         <ul class="avatar_items">
             <li><a><img src="http://img04.xesimg.com/avatar/teacher_1.jpg" alt=""></a></li>
             <li><a><img src="http://img04.xesimg.com/avatar/teacher_1.jpg" alt=""></a></li>
         </ul>
         <div class="avatar-roll">
            <a class="prev none" href="javascript:void(0);">
                <em class="icon-chevron-left">左</em>
            </a>
            <a class="next " href="javascript:void(0);">
                <em class="icon-chevron-right">右</em>
            </a>
        </div>
    </div>

html .media .ui_avatar{
    display: inline;
    float: left;
    margin: 0.1rem 0.5rem 0;
    width: 2.5rem;
    overflow: hidden;
}
html .media .ui_avatar .avatar_items{
    margin-bottom: 0.5rem;
    margin-left: 0;
    overflow: hidden;
    padding-left: 0;
    width: 800px;
}
html .media .ui_avatar .avatar_items li{
    float: left;
    overflow: hidden;
    height: 2.5rem;
    width: 2.5rem;
}
html .media .ui_avatar .avatar_items li a{
  display: block;
    height: 2.5rem;
    width: 2.5rem;
}
html .media .ui_avatar .avatar_items li a img{
    border-radius: 50%;
    float: left;
    height: 2.5rem;
    margin-right: 0.35rem;
    width: 2.5rem;
}
.media .ui_avatar .avatar-roll{
  height: 17px;
  text-align: center;
}
.media .ui_avatar .avatar-roll a em{
    display: inline-block;
    height: 17px;
    line-height: 17px;
    text-align: center;
    text-indent: -9999em;
    vertical-align: top;
    width: 17px;
}
.media .ui_avatar .avatar-roll a .icon-chevron-left {
  background: url('../img/icon_chevron_left.png') no-repeat 0 0;
}
.media .ui_avatar .avatar-roll a .icon-chevron-right {
  background: url('../img/icon_chevron_right.png') no-repeat 0 0;
}
.media .ui_avatar .avatar-roll a.none .icon-chevron-left {
  background: url('../img/icon_chevron_left_none.png') no-repeat 0 0;
}
.media .ui_avatar .avatar-roll a.none .icon-chevron-right {
  background: url('../img/icon_chevron_right_none.png') no-repeat 0 0;
}

// 头像切换封装函数
var courses = courses || {};

courses.avatar = courses.avatar || {};

(function(a){
    a.box = {
        pic : null,
        list: null,
        btn : null
    };

    a.step = $(".avatar_items li").width();
    a.size = 0;
    a.max = 0;

    a.len = 0;

    a.toggle = function( expr ){
        var btn = $(expr);
        if(btn.length == 0){ return; }
        var wrap = btn.parent();
        var pic = wrap.hasClass('avatar-roll') ? wrap.siblings('.avatar_items') : wrap.find('.avatar_items');
        if(pic.length == 0){ return; }


        this.box.pic = pic;
        this.box.list = pic.find('li');
        this.box.btn = btn;
        this.box.prev = btn.hasClass('prev') ? btn : btn.siblings('.prev');
        this.box.next = btn.hasClass('next') ? btn : btn.siblings('.next');
        this.size = this.box.list.length;
        this.max = this.size - 1;
        this.step = pic.find('li').width();
        var list = pic.find('li');
        var left = pic.css('margin-left');

        this.left = Number(left.replace('px',''));

        if(btn.hasClass('prev')){
            a.prev();
        }else{
            a.next();
        }
    }

    a.prev = function(){

        if(a.left < 0){
            a.box.pic.animate({
                marginLeft : '+='+a.step+'px'
            }, 500, function(){
                a.left += a.step;
                a.setCls();
                if(a.left >= 0){
                    $(this).clearQueue();
                }
            });
        }else{
            a.box.pic.clearQueue();
        }
    };

    a.next = function(){
        var box = a.box.pic,
        left = Number(box.css('margin-left').replace('px',''));

        if(a.left > -(a.max * a.step)){
            a.box.pic.animate({
                marginLeft : '-='+a.step+'px'
            }, 500, function(){
                a.left -= a.step;
                a.setCls();
                if(a.left <= -(a.max * a.step)){
                    $(this).clearQueue();
                }
            });
        }else{
            a.box.pic.clearQueue();
        }
    };

    a.setCls = function(){
        var hasNext = Math.abs(a.left) < ((a.box.list.length - 1) * a.step);
        var hasPrev = a.left < 0;

        if(hasNext){
            a.box.next.removeClass('none');
        }else{
            a.box.next.addClass('none');
        }

        if(hasPrev){
            a.box.prev.removeClass('none');
        }else{
            a.box.prev.addClass('none');
        }
    };

})(courses.avatar);
$(function(){
    // 绑定老师头像切换事件
    $('body').on('click', '.ui_avatar .avatar-roll a', function() {
        
        var that = $(this);
        if (that.hasClass('none')) {
            return false;
        } else {
         courses.avatar.toggle(that)     
     }
    });
})