Mağaza Siteme Kayan Bir JavaScript Liste Yapmak İstiyorum

Ben bunun gibi Java sistemli otomatik kayan tablo yapmak istiyorum, nasıl olabilir?

 

http://cloud.mail.ru/public/2wp3/F85ofJZQv

Bu adresten indirip deneyebilirsin

hocam bunlar olmadı..

html kodu çıkartıp bana verseniz ben içerisini düzenleyebilirim..

bunda sadece fotoğraf html si çıkıyor...

 

anlamadim html'i silmekden mi bahsediyorsun yoksa sadece html kalmasi mi?

hocam ben anlatamadım heralde,

yada sizi anlamadım..

direk siteye koyabileceğim bir kod var mı..??

verdiğiniz linki indirdim içinde karmaşık şeyler çıktı..

kodu buldum onda da sadece fotoğraf gösteriyor..

ben öyle kayan görünümlü yapıp siteme birde gittigidiyor.coma koyucam..

yardım ederseniz çok makbule geçer, şimdiden teşekkürler..

siteniz wordpress veya benzeri hazir bir site mi?
ben hazirladigimi zaten siz kendi sitenize gore ayarlamalisiniz.
ben html, css ve js kismini yaptim.
sitenizde veritabanindan hangi bilgileri gostermeli vs. konulari kendiniz ayarlamak zorundasiniz.
wordpress veya benzeri hazir bi siteyse bu konuyla ilgili eklentileri arasdirabilirsiniz veya bu hazirladigimi wordpress'e gore duzenleyebilirsiniz.

hocam problemi hallettim ama çok uzun duruyor..

kısa olupda oklarla aşağıya inecek şeklinde yapamadım..

kodu ekledim ''EN'' den daraltabiliyorum ama uzunluğu kısaltamıyorum...

div.main ve div.main_tab kisminda height degerlerinni degismeniz yeterli uzunluk icin

javascript kismini bu kodlarla degisirsen yuksekligi ayarladigin zaman sorunsuz calisir, yine sorun olursa yazarsin

 


    $(function(){

        /* Up */
        $('.ubtn').on('click', 'a', function(){
            $(this).prop('disabled', true);    

            var firstLi, lastLi, activeLi, liHeight, ulHeight, lastHeight, nAct, newLastLi, newLastLiHeight;
            firstLi  = $('ul.ktab li:first').index();
            lastLi   = $('ul.ktab li:last').index();
            activeLi = $('ul.ktab li.active').index() -1;
            
            liHeight = $('ul.ktab li:first').outerHeight();
            
            ulHeight = $('ul.ktab').outerHeight() - liHeight;            
            nAct = Math.round(ulHeight / liHeight);
            newLastLi = lastLi - nAct;

            newLastLiHeight = lastLi * liHeight - ulHeight;

            if(activeLi > 0 || activeLi == 0){
                $('.ktab').animate({
                    marginTop: '-'+ activeLi * liHeight +'px'
                }, function(){
                    $('ul.ktab li').removeClass('active');
                    $('ul.ktab li:eq('+ activeLi +')').addClass('active');
                    $('.ubtn a').prop('disabled', false);    
                });
            }
            else{
                $('.ktab').animate({
                    marginTop: '-'+ newLastLiHeight +'px'
                }, function(){
                    $('ul.ktab li').removeClass('active');
                    $('ul.ktab li:eq('+ newLastLi +')').addClass('active');
                    $('.ubtn a').prop('disabled', false);
                });
            }

            return false;
        });


        /* Down */
        $('.dbtn').on('click', 'a', function(){
            $(this).prop('disabled', true);    

            var firstLi, lastLi, activeLi, liHeight, nAct, newLastLi, newLastLiHeight;
            firstLi = $('ul.ktab li:first').index();
            lastLi = $('ul.ktab li:last').index();
            activeLi = $('ul.ktab li.active').index() +1;

            liHeight = $('ul.ktab li:first').outerHeight();

            ulHeight = $('ul.ktab').outerHeight() - liHeight;            
            nAct = Math.round(ulHeight / liHeight);
            newLastLi = lastLi - nAct;

            newLastLiHeight = lastLi * liHeight - ulHeight;

            if(activeLi < newLastLi || activeLi == newLastLi){
                $('.ktab').animate({
                    marginTop : '-' + activeLi * liHeight + 'px'
                }, function(){
                    $('ul.ktab li').removeClass('active');
                    $('ul.ktab li:eq('+ activeLi +')').addClass('active');
                    $('.dbtn a').prop('disabled', false);    
                });
            }
            else {
                $('.ktab').animate({
                    marginTop : '0'
                }, function(){
                    $('ul.ktab li').removeClass('active');
                    $('ul.ktab li:eq('+ firstLi +')').addClass('active');
                    $('.dbtn a').prop('disabled', false);
                });
            }

            return false;
        });


        $.autoTab = function(){

            var firstLi, lastLi, activeLi, liHeight, nAct, newLastLi, newLastLiHeight;
            firstLi = $('ul.ktab li:first').index();
            lastLi = $('ul.ktab li:last').index();
            activeLi = $('ul.ktab li.active').index() +1;

            liHeight = $('ul.ktab li:first').outerHeight();

            ulHeight = $('ul.ktab').outerHeight() - liHeight;            
            nAct = Math.round(ulHeight / liHeight);
            newLastLi = lastLi - nAct;

            newLastLiHeight = lastLi * liHeight - ulHeight;

            if(activeLi < newLastLi || activeLi == newLastLi){
                $('.ktab').animate({
                    marginTop : '-' + activeLi * liHeight + 'px'
                }, function(){
                    $('ul.ktab li').removeClass('active');
                    $('ul.ktab li:eq('+ activeLi +')').addClass('active');
                    $('.dbtn a').prop('disabled', false);    
                });
            }
            else {
                $('.ktab').animate({
                    marginTop : '0'
                }, function(){
                    $('ul.ktab li').removeClass('active');
                    $('ul.ktab li:eq('+ firstLi +')').addClass('active');
                    $('.dbtn a').prop('disabled', false);
                });
            }

        }

        var interval = setInterval($.autoTab, 2000);
        $('.main').on({
            mouseenter : function(){
                clearInterval(interval);
            },
            mouseleave : function(){
                interval = setInterval($.autoTab, 2000);
            } 
        });
        
    });

 

hocam beceremedim, yapamadım...

örnek olarak yaptım bir bak istersen,

anca bu kadar yapabildim...

http://resulakcay.tr.gg/yonca_cocuk.htm

illa böyle tablo olmasına gerek yok kayan bir tablo olsada olur..

bana direk koyabileceğim hazır kod verebilir misin..??

ben içeriğini yani listelediğim ürünleri ekleyebilirim içine..

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git