номер товара и просмотр проблемы с jquery - PullRequest
Новая
       3

номер товара и просмотр проблемы с jquery

1 голос
/ 24 июля 2010

Я графический дизайнер (поэтому я буду задавать вопросы, которые могут показаться вам смешными.
Я хочу что-то сделать, но я никогда не был в состоянии сделать вид.
мой английский не очень хорош, я хочу сделать с картинками скажу: /
Я надеюсь, что вы можете сказать (:

Я использую их весь код; 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul { list-style:none; }
ul, li { margin:0; padding:0; }
</style>
</head>

<body>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var yaziListeAktif = 0;
    var yaziListe = $("ul");
    yaziListe.children("li").eq("0").siblings().hide();
    $(".ileri").bind("click", function(){
        yaziListeAktif = yaziListeAktif == yaziListe.children("li").length-1 ? 0 : yaziListeAktif + 1;
        return false;
    });
    $(".geri").bind("click", function(){
        yaziListeAktif = yaziListeAktif == 0 ? yaziListe.children("li").length-1 : yaziListeAktif - 1;
        return false;
    });
    var yaziListeAktifOlan = function(){
        return yaziListe.children("li").eq(yaziListeAktif);
    };
    $(".geri,.ileri").bind("click", function() {
        yaziListeAktifOlan().fadeIn().siblings().hide();
    });

    var yaziToplamSayi = $("ul li").length;
    $("div#yazi-toplam-sayi").text(yaziToplamSayi);
});
</script>

<ul>
    <li><img src="1.jpg" alt="" /></li>
    <li><img src="2.jpg" alt="" /></li>
    <li><img src="3.jpg" alt="" /></li>
    <li><img src="4.jpg" alt="" /></li>
    <li><img src="5.jpg" alt="" /></li>
    <li><img src="6.jpg" alt="" /></li>
    <li><img src="7.jpg" alt="" /></li>
    <li><img src="8.jpg" alt="" /></li>
    <li><img src="9.jpg" alt="" /></li>
    <li><img src="10.jpg" alt="" /></li>
</ul>

<div id="yazi-toplam-sayi"></div>

<a href="#" class="geri">geri</a>
<a href="#" class="ileri">ileri</a>

</body>
</html>

вывод сокращенного кода

какой у меня есть момент http://img835.imageshack.us/img835/4372/screenoz.jpg

и я хочу сделать

что я хочу сделать http://img834.imageshack.us/img834/6909/17626011.jpg

thanks

Ответы [ 2 ]

0 голосов
/ 24 июля 2010

Как на счет этого (интерпретация на основе изображений) - 

(function ($) {
    $.fn.imageLister = function (options) {

        options = $.extend({
                                counter : '#counter',
                                prev: '#prev',
                                next: '#next'
                            }, options || {});


        return this.each(function (i, v) {
            var self = $(this),
                elems = self.find('li').hide(),
                num = elems.find('img').length,

                updateCounter = function() {
                    $(options.counter).text(self.find('img:visible').length + '/' + num);  
                };

                updateCounter();

            $(options.next).click(function(e) {
               e.preventDefault();
               var li = self.find('li'),
                   visible = li.filter(':visible'),
                   count = visible.length,
                   last = visible.last();

                (count)? last.next().fadeIn(updateCounter) : li.first().fadeIn(updateCounter);          
            });

            $(options.prev).click(function(e) {
               e.preventDefault();
               self.find('li:visible').last().fadeOut(updateCounter);
            });           
        });
    }

})(jQuery);

и для использования 

$(function () {
    $('ul').imageLister({ 
                            counter: '#yazi-toplam-sayi', 
                            next: 'a.ileri', 
                            prev: 'a.geri' 
                        });
});

Вот Рабочая демонстрация

0 голосов
/ 24 июля 2010

Вы имеете в виду, как: 

var yaziListeAktif = 0;
var yaziListe = $("ul");

function yaziListeAktifOlan () { 
    var children = yaziListeChildren();

    $("#yazi-toplam-sayi").text((yaziListeAktif + 1) + "/ " + children.length);

    return children.eq(yaziListeAktif);
};

function yaziListeChildren() {
     return yaziListe.children();   
}

yaziListeAktifOlan().fadeIn().siblings().hide();

$(".ileri").bind("click", function (e){
    if (++yaziListeAktif == yaziListeChildren().length) {
        yaziListeAktif = 0;   
    };

    event.preventDefault();
});

$(".geri").bind("click", function (e){
    if (yaziListeAktif-- == 0) {
        yaziListeAktif = yaziListeChildren().length - 1;   
    };

    event.preventDefault();    
});

$(".geri,.ileri").bind("click", function() {
    yaziListeAktifOlan().fadeIn().siblings().hide();
});

http://www.jsfiddle.net/ettUS/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...