点击左右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，作为动画的缓冲就可以。