the number of item and viewing the problem with jquery_问答_开发者

i'm a graphic designer (: therefore, i will ask questions may seem funny to you..

i want to do something but i've never been able to make a kind..

my english is not good for i want to do with pictures will tell :/

i hope you can tell (:

i use them all the code;

<!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&开发者_如何学运维gt;<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>

the output of the pruned code

the number of item and viewing the problem with jquery

and i want to do

the number of item and viewing the problem with jquery

thanks

You mean like:

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/

How about something like this (interpretation based on images) -

(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);

and to use

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

Here's a Working Demo