Prindol

skydown

Administrator

Registered: 2011-07-25

Posts: 335

[JAVASCRIPT] Rolling Banner (롤링 배너)

http://www.noblealba.co.kr/

- 좌우 롤링 단일 배너

//롤링배너
var _bannermain = _setinterval = null;
function bannermain() {
    if(document.getElementById('bannermain')) {
        var _bannermainWrap = $('#bannermain');
        _bannermainWrap.mouseover(function() {
            _bannermain.stop();
        });
        _bannermainWrap.mouseout(function() {
            _bannermain.start();
        });
        var _ul = $('#bannermain ul');
        var _total = $('#bannermain ul li').length;
        var _width = $('#bannermain ul li').width();
        var _left = $('#bannermain .left');
        var _right = $('#bannermain .right');
        var _i = 0;
        var _due = 3000;
        var _speed = 300;
        _left.click(function() {
            _bannermain.left();
        });
        _right.click(function() {
            _bannermain.right();
        });
        _ul.css('width', _total *_width );
        _bannermain = {
            right : function() {
                (_i < _total -1) ? _i++ : _i = 0;
                if(_i >= 0) {
                    _ul.clearQueue().animate({
                        left: '-'+Math.ceil(_width *_i) +'px'
                    },_speed);
                }
            },
            left : function() {
                (_i > 0) ? _i-- : _i = _total -1;
                if(_i >= 0) {
                    _ul.clearQueue().animate({
                        left: '-'+_width *_i +'px'
                    },_speed);
                }
            },
            start : function() {
                _setinterval = setInterval('_bannermain.right()', _due);
            },
            stop : function() {
                clearInterval(_setinterval);
            }
        };
        _setinterval = setInterval('_bannermain.right()', _due);
    }
    return false;
}

.toparea-wrap .rollbanner {position:relative; float:left; width:229px; height:80px; overflow:hidden; margin-right:10px;}
.toparea-wrap .rollbanner .list {position:absolute; left:0; top:0; height:100%;}
.toparea-wrap .rollbanner .list li {float:left;}
.toparea-wrap .rollbanner .button a.btn {display:none; position:absolute; top:30px;}
.toparea-wrap .rollbanner .button a.left {left:0;}
.toparea-wrap .rollbanner .button a.right {right:0;}

---

http://cheolho.deviantart.com/

skydown

Administrator

Registered: 2011-07-25

Posts: 335

Re: [JAVASCRIPT] Rolling Banner (롤링 배너)

- 좌우롤링 갯수 지정 배너
JS

(function($) {
    $(function() {
          var sliderFnc = {//하단배너
            'val': [
                ['total'],
                ['speed'],
                ['State'],
                ['slide'],
                ['inn'],
                ['ul'],
                ['li'],
                ['liWidth'],
                ['nextBtn'],
                ['prevBtn']
            ],
            init: function() {
                sliderFnc.val.total = 5;
                sliderFnc.val.speed = 500;
                sliderFnc.val.state = 0;
                sliderFnc.val.slide = $('#slider');
                sliderFnc.val.inn = sliderFnc.val.slide.find('.inn');
                sliderFnc.val.ul = sliderFnc.val.inn.find('ul');
                sliderFnc.val.li = sliderFnc.val.inn.find('li');
                sliderFnc.val.liWidth = (sliderFnc.val.inn.width() / sliderFnc.val.total) * sliderFnc.val.li.length;
                sliderFnc.val.li.each(function(index) {
                    $(this).width(sliderFnc.val.inn.width()/sliderFnc.val.total);
                });
                sliderFnc.val.ul.width(sliderFnc.val.liWidth);
                sliderFnc.jobsSlide();
            },//init
            jobsSlide: function() {
                sliderFnc.val.prevBtn = sliderFnc.val.slide.find('.prev');
                sliderFnc.val.nextBtn = sliderFnc.val.slide.find('.next');
                sliderFnc.val.prevBtn.click(function() {
                    sliderFnc.slideMotion('prev');
                    return false;
                });
                sliderFnc.val.nextBtn.click(function() {
                    sliderFnc.slideMotion('next');
                    return false;
                });
            },//jobsSlide
            slideMotion: function(param) {
                var _total = _last = 0;
                sliderFnc.val.li.each(function(index) {
                    var _n = index % sliderFnc.val.total;
                    if(0 == _n) _total++;
                    _last = _n;
                });
                _last = ((sliderFnc.val.total - (_last + 1)) * sliderFnc.val.li.width());
                var _width = sliderFnc.val.li.width() * sliderFnc.val.total;
                var _temp = 0;
                switch(param) {
                    case('prev'):
                        (sliderFnc.val.state == 0) ? sliderFnc.val.state = _total - 1 : sliderFnc.val.state--;
                        if(sliderFnc.val.state == 0) {
                            _temp = 0;
                        } else {
                            if(sliderFnc.val.state == _total - 1) {
                                _temp = (_width * sliderFnc.val.state) - _last;
                            } else {
                                _temp = _width * sliderFnc.val.state;
                            }
                        }
                        sliderFnc.val.ul.clearQueue().animate({
                            left: '-'+ _temp
                        },sliderFnc.val.speed);
                        break;
                    case('next'):
                        (sliderFnc.val.state == _total - 1) ? sliderFnc.val.state = 0 : sliderFnc.val.state++;
                        if(sliderFnc.val.state == _total - 1) {
                            _temp = (_width * sliderFnc.val.state) - _last;
                        } else {
                            _temp = _width * sliderFnc.val.state;
                            
                        }
                        sliderFnc.val.ul.clearQueue().animate({
                            left: '-'+ _temp
                        },sliderFnc.val.speed);
                        break;
                    default:
                }
            }//slideMotion
        };//sliderFnc
    });//$
})(jQuery);

CSS

.banner-wrap {position:relative; height:101px; margin-top:29px; background:url(../images/main_bg_shadow.gif) no-repeat 50% 100%;}
.banner-wrap .inn {position:relative; left:30px; top:17px; width:914px; height:41px; overflow:hidden;}
.banner-wrap .inn ul {position:absolute; left:0; top:0; zoom:1; width:200%;}
.banner-wrap .inn ul:after {content:""; display:block; clear:both;}
.banner-wrap .inn li {float:left;}
.banner-wrap .inn li a {display:block; text-align:center;}
.banner-wrap .btn {position:absolute; top:0;}
.banner-wrap .prev {left:0;}
.banner-wrap .next {right:0;}

---

http://cheolho.deviantart.com/