'이미지슬라이드'에 해당되는 글 1건


<script>

var leftCt = 0;
    $(function(){
        $("#album").attr("top", "0");
        imgStart("R");
    });
    function imgStart(tp){
        clearInterval($("#imgList").attr("timer"));
        if(tp == "R"){ // 오른쪽 이동
            imgRight();
            $("#imgList").attr("timer", setInterval("imgRight()", 3000000000000000000000000)); // 멈춰있는 시간
        }else{ // 왼쪽이동
            if(leftCt == 0){
                var leng = $("#imgList div").size();
                $("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
                $("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
                $("#imgList>div").eq(leng).remove();
                leftCt = 1;
            }
            imgLeft();
            $("#imgList").attr("timer", setInterval("imgLeft()", 3000000000000000000000000));
        }
    }
    function imgRight(){
        $("#imgList").animate({
            left : parseInt($("#imgList div").eq(0).width() * -1)
        },300,function(){
            $("#imgList").css("left", "0px");
            $("#imgList>div").eq(0).clone().appendTo($("#imgList"));
            $("#imgList>div").eq(0).remove();
        });
    }
    function imgLeft(){
        var leng = $("#imgList div").size();
        $("#imgList").animate({
            left : 0
        },300,function(){
            $("#imgList").css("left", "0px");
            $("#imgList").css("left",parseInt($("#imgList div").eq(0).width()*-1));
            $("#imgList>div").eq(parseInt(leng-1)).clone().prependTo($("#imgList"));
            $("#imgList>div").eq(leng).remove();
        });
    }
</script>
<style>
/*
    이미지 사이즈 맞춰서 수정해주세요... (#viewArea)
*/
#viewArea {position:relative; width:565px; height:78px;overflow:hidden;}
#imgList {position:absolute; width:2000px; left:0px; top:0px;}
#imgList div {float:left; margin:0px; padding:0px;}
</style>

<table>
 <tbody><tr>
  <td>
   <div>
    <span onclick="imgStart('L')">&lt;</span>&nbsp;
   </div>
  </td>
  <td>
  <div id="viewArea">
  <div id="imgList">
   <div>
<a href="http://http://www.naver.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_chardonnay_01_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.daum.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_cabernet-sauvig_02_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.paran.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Park-Merlot_03_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.google.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Park-Merlot_03_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.wow.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Peju-Merlot_05_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.haha.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_sauvignon-reser_08_s.gif"></a>&nbsp;</div>
   <div>
<a href="http://www.naver.com"><img src="http://www.ebestwine.co.kr/product_html/prd_images/product_usa_Peju-Merlot_05_s.gif"></a>&nbsp;</div>
  </div>
 </div>
  </td>
  <td><span onclick="imgStart('R')">&gt;</span> </td>
 </tr>
</tbody></table>

[출처] jQuery 이미지 슬라이드 |작성자 바다
Posted by 아로스
1

아로스

달력

05-18 20:44