2012-06-01 5 views
1

나는 이것이 전에 물어 보았을 것이라고 확신하지만, 나는 몇 가지 다른 해답을 시도해 본 적이 없다. 게다가 이것은 두 부분으로 된 질문입니다.jquery 슬라이드 쇼에 다음 및 뒤로 화살표를 추가

1. 내 jquery 이미지 carousal에 뒤로 화살표와 다음 화살표를 삽입해야합니다. http://www.bmww.com/clients/index3/casestudies/cabrini_casestudy.html

내가 화살표를 삽입해도 이미지에 상관 관계에 강조를 유지하는 번호가 필요합니다 여기

는 현재에 대한 링크입니다. 전환 효과를 변경하지 않는 이유는 무엇인가? 아래는 제 코드이지만 제 질문에 답을 얻기 위해 다른 것이 필요한지 알려주십시오.

<style> 
    a{color: #666335;} 
    a.clicked{ color: #D85D27;} 
    </style> 

내 스크립트 :

 <script type="text/javascript"> 
     $(window).load(function() { 
$('.slideshow').blinds(); 


    }) 
    $(document).ready(function(){ 
    $('a.change_link').click(function(){ 
$('.clicked').removeClass('clicked'); 
$(this).addClass('clicked'); 
}); 

    }) 
    </script> 

2. 내가 만약 당신이 모든 것을 잘 모릅니다 여기

<div align="center" class="slideshow" style="height:500px; float:none"> <ul style="margin-top:-30px"> <li><img src="images/cabrini_1.png" alt="lemon" /></li><!--MUST ALWAYS HAVE THIS HERE AND BE THE SAME IMAGE AS NEXT IMAGE--> <li><img src="images/cabrini_1.png" alt="lemon tea" /></li> <li><img src="images/cabrini_2.png" alt="splashing lemon" /></li> <li><img src="images/cabrini_3.png" alt="salad with lemon" /></li> <li><img src="images/cabrini_4.png" alt="lemonade!" /></li> <li><img src="images/cabrini_5.png" alt="sliced lemon" /></li> <li><img src="images/cabrini_6.png" alt="dripping lemon" /></li> </ul> </div> <div id="casenumbers" align="right" style="margin-right:10px"> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0); return false"></a><!--MUST ALWAYS HAVE THIS HERE AND BE THE SAME IMAGE AS NEXT IMAGE BUT ALWAYS KEEP HIDDEN--> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1); return false">1</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2); return false">2</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(3); return false">3</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(4); return false">4</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(5); return false">5</a> <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(6); return false">6</a> <a href="cabrini_casestudy2.html" class="ex1" > &#187; </a> </div> <!--end slideshow div--> 

내 CSS 코드 : 여기

내 HTML 코드입니다 당신이 예제 링크를 클릭 할 때 그것을 보아라. 그러나 때때로 내가 이상한 스크롤바가 나올 때 나는 i의 전체 목록을 팝업한다. 모든 것이로드되기 전에 마법사가 1 초 동안 표시됩니다. 추가 할 수있는 코드 덩어리가 있습니까? 그렇지 않으면 완전히로드 될 때까지 올바르게 표시되지 않는 회전 휠이 있습니까?

미리 감사드립니다. 죄송합니다. 메신저가 아직 배우지 않아서 간단하거나 어리석은 질문처럼 보일 수 있습니다. 준비 문서에서

답변

0

:

$(document).keyup(
    function(e) 
    { 
     if(e.keyCode == left) 
      //decrement blinds 
     else if(e.keyCode == right) 
      //increment blinds 
     else;//do nothing 
    }); 

당신은 오른쪽과 왼쪽 화살표의 키 코드를 검색해야합니다.

+0

여기에 새로운 링크가 있습니다 ... 나는 다음의 화살표를 사용하기로 결정했습니다 : http://www.bmww.com/clients/index3/casestudies/cabrini_casestudy-test.html – kaitlyn

+0

미안하지만 ... 그걸로 할거야? – kaitlyn

+0

이 기능은 전체 문서의 이벤트 "keyup"을 해당 델리게이트 함수에 바인딩합니다. 본질적으로, 귀하의 문서에서 키를 누를 때마다 키 코드가 일치하는지 확인하고 일치하는 코드 (내 의견이있는 곳)를 수행합니다 – Codeman

관련 문제