$(function () {
    var page = 1;
    var i = 1;
    function shows() {
        var pant = $("#right").parents("#index");
        var cunfang = $(".cunfang");
        var len = $(".cunfang li").length;
        var width = $(".cunfang li").width();
        if (!cunfang.is(":animated")) {
            if (page == len) {
                cunfang.animate({ left: '0px', opacity: "0.3" }, 0);
                cunfang.animate({ opacity: "1" }, 3000);
                page = 1;
            } else {
                cunfang.animate({ left: '-=' + width, opacity: "0.3" }, 0);
                cunfang.animate({ opacity: "1" }, 3000);
                page++;
            }
        }
    }

    var claer = setInterval(shows, 3000);
    $("#left").click(function () {
        var pant = $(this).parents("#index");
        var cunfang = pant.find(".cunfang");
        var len = pant.find(".cunfang li").length;
        var width = pant.find(".cunfang li").width();
        var page_count = Math.ceil(len / i);
        if (!cunfang.is(":animated")) {
            if (page == 1) {
                cunfang.animate({ left: '-=' + width * (page_count - 1), opacity: "0.1" }, 0);
                cunfang.animate({ opacity: "1" }, 1000);
                page = len;
            } else {
                cunfang.animate({ left: '+=' + width, opacity: "0.1" }, 0);
                cunfang.animate({ opacity: "1" }, 1000);
                page--;
            }
        }

    })
})