좌우 클릭시 스크롤 움직이기

script

<script>
    $(document).ready(function () {
        var list = $(".coList");

        function gotoNext(flag) {
            switch (flag) {
                case "prev":
                    var last = $(list).find("li:last-child");
                    $(list).prepend(last);
                    $(list).find("li:first-child").addClass("first").siblings("li").removeClass(
                        "first");
                    break;
                case "next":
                    var first = $(list).find("li:first-child");
                    $(list).append(first);
                    $(list).find("li:first-child").addClass("first").siblings("li").removeClass(
                        "first");
                    break;
            }
        }

        $(".prev").click(function () {
            gotoNext("prev");
        });

        $(".next").click(function () {
            gotoNext("next");
        })


    });

</script>

style

<style type="text/css">
    .coList:after {
        list-style-type: none;
    }

    .coList:after {
        content: '';
        display: block;
        clear: both;
    }

    .coList li {
        float: left;
        padding: 0 10px;
        margin: 20px 0 0;
    }

    .coList li img {
        height: 100px;
    }

</style>

HTML

<a href="#" class="prev">이전</a>
<a href="#" class="next">다음</a>

<div style="overflow:hidden; width:730px;">
    <ul class="coList" style="width:1460px;">
        <li class="first"><img src="img1.png" alt="img1.png" /></li>
        <li><img src="img2.png" alt="img2.png" /></li>
        <li><img src="img3.png" alt="img3.png" /></li>
        <li><img src="img4.png" alt="img4.png" /></li>
        <li><img src="img5.png" alt="img5.png" /></li>
        <li><img src="img6.png" alt="img6.png" /></li>
        <li><img src="img7.png" alt="img7.png" /></li>
        <li><img src="img8.png" alt="img8.png" /></li>
    </ul>
</div>