A Slide Right And Left Effect

Question

I have a the following html code :

Left

<!doctype html><html><head><title></title><styletype="text/css">.menuTabs {
    float: left;
    width: 284px;
    overflow:hidden;
    position:relative;
    height:50px;
}

.img-reel { position:absolute; left:0; top:0; height:50px; }

.mtabArrowLeft {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 15px;
    margin-right: 4px;
}

.mtabArrowRight {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 3px;
    margin-right: 15px;

}

.menutabBTN {
    float: left;
    height: 25px;
    width: 65px;
    margin-right: 3px;
    margin-left: 3px;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 25px;
}

    </style></head><body><divclass="mtabArrowLeft">Left</div><divclass="menuTabs"><divclass="img-reel"><inputclass="menutabBTN"name=""type="button"value="a" /><inputclass="menutabBTN"name=""type="button"value="b" /><inputclass="menutabBTN"name=""type="button"value="c" /><inputclass="menutabBTN"name=""type="button"value="d" /><inputclass="menutabBTN"name=""type="button"value="e" /><inputclass="menutabBTN"name=""type="button"value="f"/></div></div><divclass="mtabArrowRight">Right</div><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"charset="utf-8"></script><scripttype="text/javascript">


    $(function() {
            var imageWidth = 71;
            var reelSize = 4;
            var imageSum = $('.img-reel input').size();
            var imageReelWidth = imageWidth * imageSum;
            $('.img-reel').css({'width' : imageReelWidth});

            rotate = function(){
                var trigger = $btn.attr('class');
                var image_reelPosition = (trigger=='mtabArrowLeft') ? -imageWidth : imageWidth;
                var reel_currentPosition = $('.img-reel').css('left').replace('px','');
                var pos = reel_currentPosition-image_reelPosition;
                var maxPos = (imageSum-reelSize)*-imageWidth;
                //console.log('pos='+pos+', max='+maxPos);if(pos>=maxPos && pos<=0){
                    $('.img-reel').animate({left:pos},300);
                    $('.mtabArrowLeft,.mtabArrowRight').fadeTo(250,1);
                    //console.log('move');if(pos==maxPos){$('.mtabArrowRight').fadeTo(250,0.5);}
                    elseif(pos==0){$('.mtabArrowLeft').fadeTo(250,0.5);}
                }
            };
            if (imageSum > 4) {
                $('.mtabArrowLeft,.mtabArrowRight').click(function(){
                    $btn = $(this);
                    rotate();
                    returnfalse;
                });
            }
            else {
                $('.mtabArrowLeft,.mtabArrowRight').fadeTo(0,0.5).click(function(){returnfalse});
            }
    })
</script></body></html>

Solution 2:

http://flowplayer.org/tools/demos/scrollable/index.html

Scrollable is a versatile and fool-proof solution to do sliders... check out the tutorial (and download the script) from the above link– this HTML / CSS / jQuery is taken pretty much directly from the site.

You'll have to change the widths of the elements in the CSS to suit your design. Hope that helps.

HTML

Baca Juga

<divclass="mtabArrowLeft prev left">Left</div><divclass="menuTabs scrollable"><divclass="items"><inputclass="menutabBTN"name=""type="button"value="a" /><inputclass="menutabBTN"name=""type="button"value="b" /><inputclass="menutabBTN"name=""type="button"value="c" /><inputclass="menutabBTN"name=""type="button"value="d" /><inputclass="menutabBTN"name=""type="button"value="e" /><inputclass="menutabBTN"name=""type="button"value="f"/></div></div><divclass="mtabArrowRight next right">Right</div>

CSS

.scrollable {
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
}

.scrollable.items {
    width:20000em;
    position:absolute;
}

.itemsinput {
    float:left;
}

jQuery

$(function() {

    // initialize scrollable
    $(".scrollable").scrollable();

});

JavaScript Controls

A Slide Right And Left Effect

Solution 2:

Post a Comment for "A Slide Right And Left Effect"