手动幻灯片

Question

我正在我的网站上工作，我希望这个div包含一个无序列表中的图像和两个div，一次显示一个图片，当他们点击他们的左或右div时，你知道有点像手动幻灯片节目。我想我的z-index有问题，因为出于某种原因我不认为我被允许点击div。或者它可能是我的JQuery。请看看并帮助我。

HTML：

<div id="bottomLeft">
    <ul>
        <li><img src="image/10pc.jpg" /></li>
        <li><img src="slideImages/chicken0.jpg" /></li>
        <li><img src="slideImages/chicken1.jpg" /></li>
        <li><img src="slideImages/chicken2.jpg" /></li>
    </ul>
    <div id="leftArrow">left</div>
    <div id="rightArrow">right</div>
</div>

使用Javascript：

$('#rightArrow').click(function() {
    $('#bottomLeft li[visibility="visible"]').attr("visibility","hidden").next.attr("visibility","visible");
});

CSS：

#bottomLeft{
    float: left;
    width: 50%;
    height: 25.9em;
    /*background-color: limegreen;*/
    top:0;
    /*background-image: url(image/10pc.jpg);*/
    position:relative;
    z-index: -1;
}
#bottomLeft ul li img{
    width: 100%;
    height: 25.9em;
    position: absolute;
    z-index: -5;
}
#bottomLeft ul li{
    text-decoration:none;
    margin: 0;
    padding: 0;
}
#bottomLeft ul{
    list-style-type:none;
    margin: 0;
    padding: 0;
    z-index: -5;
}
#bottomLeft ul li:not(:first-child){
    visibility:hidden;
}