jq 左右轮播图案例

 show():显示
* hide():隐藏
*
* slideDown():滑入
* slideToggle():滑出
*
* fadeIn():淡入
* fadeOut():淡出
* fadeToggle():切换

<div class="slider">
    <ul>
        <li><a href="#"><img src="imgs/JD/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs/JD/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs/JD/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs/JD/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs/JD/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs/JD/6.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs/JD/7.jpg" alt=""></a></li>
        <li><a href="#"><img src="imgs/JD/8.jpg" alt=""></a></li>
    </ul>
    <!--箭头-->
    <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
    </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        var count = 0;
        $(".arrow-right").click(function () {
            count++;
            if (count == 8) {
                count = 0;
            }
            console.log(count);
            //让count渐渐的显示，其他兄弟渐渐的隐藏
            $(".slider li").eq(count).fadeIn().siblings().fadeOut();
        });
        $(".arrow-left").click(function () {
            count--;
            if (count == -1) {
                count = $(".slider li").length - 1;
            }
            console.log(count);
            $(".slider li").eq(count).fadeIn().siblings().fadeOut();
        });
    });
</script>

转载于:https://www.cnblogs.com/lujieting/p/10104771.html