点击轮播图片左右button，实现轮播效果

$(function () {
    var index = 1;
    var pPage = 1;
    var $v_citemss = $(".citemss");
    var $v_show = $v_citemss.find("ul");
    v_width = $v_citemss.width();     //图片展示区外围div的大小

    //注：若为整数，前边不能再加var。否则会被提示underfine
    p_count = $v_citemss.find("li").length;   //获取此处li的个数
    $(".slideprev1").click(function () {
        if (!$v_show.is(":animated")) {
            if (pPage == index) {
                $v_show.animate({ right: '0px' }, "3000");
                pPage = 4;
            } else {
                $v_show.animate({ right: '-=' + v_width }, "3000");
                pPage--;
            }
        }
    });

    $(".slidenext").click(function () {
        if (!$v_show.is(":animated")) {
            if (pPage == p_count) {
                $v_show.animate({ left: '0px' }, "3000");
                pPage = 1;
            } else {
                $v_show.animate({ left: '-=' + v_width }, "3000");
                pPage++;
            }
        }
    });

});

点击左右button。实现图片轮播效果。js代码例如以下：

$(function () {
    var index = 1;
    var pPage = 1;
    var $v_citemss = $(".citemss");
    var $v_show = $v_citemss.find("ul");
    v_width = $v_citemss.width();     //图片展示区外围div的大小

    //注：若为整数，前边不能再加var。否则会被提示underfine
    p_count = $v_citemss.find("li").length;   //获取此处li的个数
    $(".slideprev1").click(function () {
        if (!$v_show.is(":animated")) {
            if (pPage == index) {
                $v_show.animate({ right: '0px' }, "3000");
                pPage = 4;
            } else {
                $v_show.animate({ right: '-=' + v_width }, "3000");
                pPage--;
            }
        }
    });

    $(".slidenext").click(function () {
        if (!$v_show.is(":animated")) {
            if (pPage == p_count) {
                $v_show.animate({ left: '0px' }, "3000");
                pPage = 1;
            } else {
                $v_show.animate({ left: '-=' + v_width }, "3000");
                pPage++;
            }
        }
    });

});

对于鼠标悬浮上去，下方出现横条描写叙述、左右出现button等效果，全然能够用css实现，不须要使用js来实现了。

详细操作：css中绝对或相对定位，left，right或bottom为负数，鼠标悬浮上去后，分别正确显示，再设置一下transition，作为动画的缓冲就可以。