Where The Streets Have No Name

image slider구현 예제 본문

Developement/Web

image slider구현 예제

highheat 2008. 4. 14. 11:46
<html>
  <head>
     <script type="text/javascript" src="../../lib/jquery.js"></script>    
     <script type="text/javascript">
            $(document).ready(function(){
           
                var curIndex = 0;    
                $('#imgContainer').css('cursor','pointer');            
               
                $('#btnLeft').click(function() {
                    if(curIndex > 0){
                        $('div > img:nth('+curIndex+')').hide('slow');
                        curIndex--;
                        $('div > img:nth('+curIndex+')').show('slow');                                
                        $('#curPos').text(curIndex+1);
                    }
                })
               
                $('#btnRight').click(function() {
                    if(curIndex < $('#imgContainer > img').size()-1){                        
                        //alert($('div > img:nth(1)').attr('src'));
                        $('#imgContainer > img:nth('+curIndex+')').hide('slow');
                        curIndex++;
                        $('#imgContainer > img:nth('+curIndex+')').show('slow');                        
                        $('#curPos').text(curIndex+1);
                    }
                })
                               
                $('#imgContainer').click(function(event) {                                        
                    var img = new Image();
                    img.src = $('#imgContainer > img:nth('+curIndex+')').attr('src');
                    //alert(img.width+','+event.x);
                    if(event.x < img.width/2){ //left
                        $('#btnLeft').trigger('click');
                    }else{ //right
                        $('#btnRight').trigger('click');
                    }                    
                })
               
                $("#msg").ajaxError(function(event, request, settings){
                   $("#msg").append("<li>Error requesting page : " + settings.url + "</li>");
                 });
                                 
                 $("#msg").ajaxStart(function(){                                                          
                   $("#msg,#imgContainer,#curPos,#totalCount").empty();
                   curIndex = 0;
                 });
             
                 $("#msg").ajaxStop(function(){
                   var now = new Date();                   
                   var stopTime = now.toLocaleString()+':'+now.getMilliseconds()+'ms';
                   $("#msg").append("stop : "+stopTime);                  
                 });              

                $('#btnGoodSearch').click(function() {                                                
                    $.ajax({                        
                       type: "GET",
                       url: "http://www.****.com/shop/test/test6_ds.php",
                       data: "name="+$('#txtSearch').get(0).value,
                       dataType: "json",
                       cache: false ,
                       success: function(data){                            
                           $.each(data, function(i,val){  
                               var tmp = (i>0)?'none':'inline';
                               $("<img/>").attr("src", 'http://www.****.com/shop/'+val.gd_1_img)
                                                .css('display',tmp) .appendTo("#imgContainer");      
                           });                  
                           var initPos = (data.length > 0)?1:0;
                           $('#curPos').text(initPos);
                           $('#totalCount').text('/'+data.length);                
                       }
                    });
                });

            });        
     </script>
   </head>
  <body>                        
    <img id="imgView" src="http://www.***.com/shop/images/common/left_menu01_04.gif">
    <input type="text" id="txtSearch">
    <input type="button" id="btnGoodSearch" value="상품조회">
    <input id="btnLeft" type="button" value="<<">
    <input id="btnRight" type="button" value=">>">
    <span id="msg"></span>
    <div id="imgContainer" style="padding:0px;border-width:0px;width:10px;height:10px;">                              
    </div>
    <span id="curPos"></span><span id="totalCount"></span>    
  </body>
</html>
'Developement/Web' Related Articles more