테스트 사이트 - 개발 중인 베타 버전입니다

마우스오버시 버턴 히든/노출 문의드립니다. 채택완료

연진공원 5년 전 조회 1,777

슬라이드보면 양끝에 <>이런 방향버턴인데요 현재소스는 바로 노출만되있는데 마우스 아웃시 히든되는 기능을 추가하고 싶은데 개발자가 아니라서 수정이 안되네요...skdslider a.prev/next 같은데...스크립트 추가수정 부탁드립니다. -------------------------------------css-------------------------------------- .skdslider a.prev{background: url("image/left.png") no-repeat scroll 0 0 transparent; width:35px; height:35px; display:block; cursor:pointer; position:absolute; top:50%; left:2%; margin-top:-17px;} .skdslider a.next{background: url("image/right.png") no-repeat scroll 0 0 transparent; width:35px; height:35px; display:block; cursor:pointer; position:absolute; top:50%; right:2%; margin-top:-17px;} .skdslider a.prev:hover{} .skdslider a.next:hover{} .skdslider a.play{background: url("image/play.png") no-repeat scroll center center transparent; width:35px; height:35px; display:none; cursor:pointer; position:absolute; top:50%; left:48%; margin-top:-17px;} .skdslider a.pause{background: url("image/pause.png") no-repeat scroll center center transparent; width:35px; height:35px; display:none; cursor:pointer; position:absolute; top:50%; left:48%; margin-top:-17px;} -----------------------------------------------이하 스크립트 ----------------------------------------- (function($){      $.skdslider = function(container,options){         // settings         var config = {             'delay': 2000,             'animationSpeed': 500,             'showNav':true,             'autoSlide':true,             'showNextPrev':false,             'pauseOnHover':false,             'numericNav':false,             'stopSlidingAfter':false,             'showPlayButton':false,             'animationType':'fading' /* fading/sliding */         };                  if ( options ){$.extend(config, options);}         // variables             config.touch=true;                 var touch = (( "ontouchstart" in window ) || window.DocumentTouch && document instanceof DocumentTouch);             var user_agent = window.navigator.userAgent;             var msie = user_agent.indexOf("MSIE ");

            if(msie > 0){                 var ie_version=parseInt(user_agent.substring(msie + 5, user_agent.indexOf(".", msie)));                 config.touch=(ie_version>8)?true:false;             }                                            $(container).wrap('

');         var element=$(container).closest('div.skdslider');         element.find('ul').addClass('slides');                 var slides = element.find('ul.slides li');         var targetSlide=0;         config.currentSlide=0;         config.currentState='pause';         config.running=false;                                  if(config.stopSlidingAfter){                     if(config.stopSlidingAfter=='all'){                         config.stopSlidingAfter=slides.length;                     }                   config.stopSlidingAfter-=1;                   }                  if(config.animationType=='fading'){            slides.each(function(){$(this).css({'position': 'absolute', 'left': '0','top': '0','bottom':'0','right':'0'});});         }                  if(config.animationType=='sliding'){            slides.each(function(){$(this).css({'float': 'left', 'display': 'block','position': 'relative'});});                        var totalWidth=element.outerWidth()*slides.size();            element.find('ul.slides').css({'position': 'absolute', 'left': '0','width':totalWidth});            slides.css({'width':element.outerWidth(),'height':element.outerHeight()});                        $( window ).resize(function() {               var totalWidth=element.outerWidth()*slides.size();               element.find('ul.slides').css({'position': 'absolute', 'left': '0','width':totalWidth});               slides.css({'width':element.outerWidth(),'height':element.outerHeight()});            });         }                  //if (touch)                 if(config.touch)         $.skdslider.enableTouch(element,slides, config);                 $.skdslider.createNav(element,slides, config);         slides.eq(targetSlide).show();         if (config.autoSlide==true){            config.currentState='play';                config.interval=setTimeout(function() {                     $.skdslider.playSlide(element,slides, config);                 }, config.delay);          }                  if(config.pauseOnHover==true){            slides.hover(function(){               if (config.autoSlide==true){                                      config.currentState='pause';                  clearTimeout(config.interval);               }            },function(){               if (config.autoSlide==true){                          config.currentState='play';                   if(config.autoSlide==true) $.skdslider.playSlide(element,slides, config);                }              } );         }     };        $.skdslider.createNav=function(element,slides,config){                          var slideSet ='
    ';             for(i=0;i'+slideContent+'';               else               slideSet+='
  • '+slideContent+'
  • ';             }             slideSet+='
';                                                    if (config.showNav==true){                     element.append(slideSet);                     var nav_width=element.find('.slide-navs')[0].offsetWidth;                     nav_width=parseInt((nav_width/2));                     nav_width=(-1)*nav_width;                     element.find('.slide-navs').css('margin-left',nav_width);                     // Slide marker clicked                     element.find('.slide-navs li').click(function(){                         index = element.find('.slide-navs li').index(this);                         targetSlide = index;                         clearTimeout(config.interval);                         config.currentState='play';                         config.running=false;                         $.skdslider.playSlide(element,slides, config,targetSlide);                         return false;                     });             }                      if (config.showNextPrev==true){              var nextPrevButton ='';                   nextPrevButton +='';                                 element.append(nextPrevButton);                            element.find('a.prev').click(function(){                  $.skdslider.prev(element,slides, config);                                                     });                           element.find('a.next').click(function(){                   $.skdslider.next(element,slides, config);                                                 });         }                if (config.showPlayButton==true){                         var playPause =(config.currentState=='play' || config.autoSlide==true)?'':'';               element.append(playPause);                         element.hover(function(){element.find('a.play-control').css('display','block');},function(){element.find('a.play-control').css('display','none');});                         element.find('a.play-control').click(function(){                                                                     if(config.autoSlide==true)                     {                        clearTimeout(config.interval);                        config.autoSlide=false;                        config.currentState='pause';                        $(this).addClass('play');                        $(this).removeClass('pause');                     }                     else                     {                        config.currentState='play';                        config.autoSlide=true;                        $(this).addClass('pause');                        $(this).removeClass('play');                                                if((config.currentSlide+1)==slides.length)targetSlide = 0;                        else targetSlide = (config.currentSlide+1);                                                clearTimeout(config.interval);                        $.skdslider.playSlide(element,slides, config,targetSlide);                     }                        return false;              });       }          };      $.skdslider.next=function(element,slides,config){     if((config.currentSlide+1)==slides.length)targetSlide = 0;     else targetSlide = (config.currentSlide+1);          clearTimeout(config.interval);     config.currentState='play';     $.skdslider.playSlide(element,slides, config,targetSlide);     return false;  }     $.skdslider.prev=function(element,slides,config){     if(config.currentSlide==0)targetSlide = (slides.length-1);     else targetSlide = (config.currentSlide-1);

    clearTimeout(config.interval);     config.currentState='play';     config.running=false;     $.skdslider.playSlide(element,slides, config,targetSlide);     return true;  }     $.skdslider.prev=function(element,slides,config){     if(config.currentSlide==0)targetSlide = (slides.length-1);     else targetSlide = (config.currentSlide-1);

    clearTimeout(config.interval);     config.currentState='play';     config.running=false;     $.skdslider.playSlide(element,slides, config,targetSlide);     return true;  }     $.skdslider.playSlide=function(element,slides,config,targetSlide){                 if(config.currentState=='play' && config.running==false){                              element.find('.slide-navs li').removeClass('current-slide');                 if(typeof (targetSlide)=='undefined'){                       targetSlide = ( config.currentSlide+1 == slides.length ) ? 0 : config.currentSlide+1;                 }                 if(config.animationType=='fading'){                     config.running=true;                     slides.eq(config.currentSlide).fadeOut(config.animationSpeed);                     slides.eq(targetSlide).fadeIn(config.animationSpeed, function() {                                                                              $.skdslider.removeIEFilter($(this)[0]);                          config.running=false;                             });                 }                 if(config.animationType=='sliding'){                     var left=(targetSlide*element.outerWidth())*(-1);                     config.running=true;                     element.find('ul.slides').animate({left:left}, config.animationSpeed,function(){                       config.running=false;                                                                                              });                 }                 element.find('.slide-navs li').eq(targetSlide).addClass('current-slide');                 config.currentSlide=targetSlide;         }                       if(config.stopSlidingAfter && config.stopSlidingAfter==config.currentSlide){                                clearTimeout(config.interval);                 config.autoSlide=false;                 config.currentState='pause';                 element.find('a.play-control').addClass('play');                 element.find('a.play-control').removeClass('pause');           }                if (config.autoSlide==true && config.currentState=='play'){             config.interval=setTimeout((function() {                 $.skdslider.playSlide(element,slides, config);             }), config.delay);       }   };      $.skdslider.enableTouch=function(element,slides,config){       element[0].addEventListener('touchstart', onTouchStart, false);        var startX;            var startY;        var dx;        var dy;                function onTouchStart(e){            startX = e.touches[0].pageX;            startY = e.touches[0].pageY;             element[0].addEventListener('touchmove', onTouchMove, false);            element[0].addEventListener('touchend', onTouchEnd, false);        }                function onTouchMove(e) {                  e.preventDefault();                  var x = e.touches[0].pageX;                  var y = e.touches[0].pageY;                  dx = startX - x;                  dy = startY - y;       }             function onTouchEnd(e) {                  element[0].removeEventListener('touchmove', onTouchMove, false);                  if(dx>0){                       $.skdslider.next(element,slides, config);                           }else{                      $.skdslider.prev(element,slides, config);                               }                  element[0].removeEventListener('touchend', onTouchEnd, false);          }       }      $.skdslider.removeIEFilter=function(elm){       if(elm.style.removeAttribute){         elm.style.removeAttribute('filter');        }     }      $.fn.skdslider = function(options){         return this.each(function(){             (new $.skdslider(this,options));         });     };      })(jQuery);

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

css에

 

.skdslider a {display: none;}

.skdslider:hover a {display: block;}

 

이렇게 추가해보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

연진공원
5년 전
안되네요..;;;
병원에서일해요
5년 전
개발자도구 사용해서 추가한 css 외에

display를 변경하는 css가 있는지 확인해보시고

해당 css도 같이 수정해주시면 될거에요

댓글을 작성하려면 로그인이 필요합니다.

.skdslider a.prev{background: url("image/left.png") no-repeat scroll 0 0 transparent; width:35px; height:35px; display:block; cursor:pointer; position:absolute; top:50%; left:2%; margin-top:-17px;opacity:0;visibility:hidden;} .skdslider a.next{background: url("image/right.png") no-repeat scroll 0 0 transparent; width:35px; height:35px; display:block; cursor:pointer; position:absolute; top:50%; right:2%; margin-top:-17px;opacity:0;visibility:hidden;}

 

.skdslider:hover a.prev{opacity:1;visibility:visible;}

.skdslider:hover a.next{opacity:1;visibility:visible;}

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인