今日工作总结：jquery轮转效果的集成与前台页面banner的设计思路总结

浏览数：31 / 时间：2015年06月09日

今日做了两个项目中的两个问题，现在特来总结一下，以便分享给更多的朋友们。

1.jquery轮转效果的集成

涉及到jquery的不同版本问题，解决办法是在后缀用jQuery代替$。项目地址在：121.40.62.79 可以访问，并通过查看源代码获取到。

jquery代码如下：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript">
//影像力换一换
var getyxl = jQuery(‘#picLBxxl li‘).eq(0).width();
(function($){
    var arartta= window[‘arartta‘] = function(o){
        return new das(o);
    }
    das = function(o){
        this.obj = $(‘#‘+o.obj);
        this.bnt = $(‘#‘+o.bnt);
        this.showLi = this.obj.find(‘li‘);
        this.current = 0;
        this.myTimersc = ‘‘;
        this.init()
    }
    das.prototype = {
        chgPic:function(n){
            var _this = this;
            for (var i = 0,l= _this.showLi.length; i < l; i++) {
                _this.showLi.eq(i).find(".pic").find(‘img‘).eq(n).attr(‘src‘,_this.showLi.eq(i).find(".pic").find(‘img‘).eq(n).attr(‘nsrc‘));

                $(‘#picLBxxl dl:not(:animated)‘).animate({left: -(n * getyxl) + "px"}, {easing:"easeInOutExpo"}, 1500, function(){});
            }
        },
        rotate:function(){
            var _this = this;
            clearInterval(_this.myTimersc);
            _this.bnt.children().css({
                    ‘-webkit-transform‘:‘rotate(0deg)‘,
                    ‘-moz-transform‘:‘rotate(0deg)‘
            });
            var tt = 0;
            var getBnts = _this.bnt.children();
            _this.myTimersc = setInterval(function(){
                tt += 10;
                if (tt >= 180) {
                    clearInterval(_this.myTimersc);
                }
                rotateElement(getBnts,tt);
            },25)
        },
        init:function(){
            var _this = this;
            this.bnt.bind("click",function(){
                _this.current++;
                if (_this.current > 2) {
                    _this.current = 0 ;
                }
                _this.chgPic(_this.current);
                _this.rotate();

            })
            this.bnt.mouseenter(function () {
                _this.rotate();
            });

        }
    }
})(jQuery)

arartta({
    bnt:‘xxlChg‘,
    obj:‘picLBxxl‘
});

function rotateElement(element,angle){
    var rotate = ‘rotate(‘+angle+‘deg)‘;
    if(element.css(‘MozTransform‘)!=undefined)
        element.css(‘MozTransform‘,rotate);
    else if(element.css(‘WebkitTransform‘)!=undefined)
        element.css(‘WebkitTransform‘,rotate);
}
</script>