html/css 콘텐츠를 통해 회전하는 JavaScript

Question

안녕하세요 저는 현재 순수한 html/css/javascript로 데모 사이트를 만들고 있습니다. 보통이 문제를 해결하기 위해 루비를 사용하고 부분을 렌더링하는 것이지만 자바 스크립트로 연습 할 수는 있습니다. 흥미로운 도전이 될 수도 있습니다. 그래서 내가 만든 것은 텍스트로 감싼 단어 이미지를 가진 코드 블록입니다. 그리고 나는 콘텐츠 블록의 양쪽에 버튼을 배치했다. 내 목표는 이미지 위에 마우스를 올려 놓을 때까지 버튼을 숨기고 다른 이미지와 설명으로 회전시키는 것입니다. 컬렉션 블록은 탭으로 그룹화됩니다. 예를 들어 홈 탭에는 4 개의 콘텐츠 모음이 있으며, 다음 탭은 제품이 될 것이며, 해당 탭을 클릭하면 각 제품에 대해 3 개의 콘텐츠 모음이 있고 각각에는 이미지 및 설명 ..

멋진 그래서 지금까지이 여기에 무엇을 내 HTML입니다 : 내가 도움이되었습니다하지만 난 충돌이 한 내가 온라인으로 발견 한 몇 가지를 발견했다

<div class='content'> 
    <div class='box'> 
    <ul id="navigation"> 
     <li class="two"><a href="#">Home</a></li> 
     <li class="three selected"><a href="#">Products</a></li> 
     <li class="four"><a href="#">Technology</a></li> 
     <li class="five"><a href="#">Cosulting</a></li> 
     <li class="six"><a href="#">Contact</a></li> 
    </ul> 

    <div id="sub_content"> 
     <div class='title'> 
     <h3> Home </h3> 
    </div> 
    <div class="clear"></div> 
    <div class="arrow"> 
     <a id="left" href=""><img src="/home/***/HTML/launch_pad/images/lefta.png">/a> 
     <a id="right" href=""><img src="/home/***/HTML/launch_pad/images/righta.png"></a> 
    </div> 
    <div class="clear"></div> 
    <div id="wall"> 
     <div class="hide"> 

     <div class="description"> 
      <img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic"> 
     <h2>Who are we?</h2> 
     <p>a super hero organization fighting evil all day long!! .</p> 
    </div> 

    #the description class is then repeated each with a unique image and new info in the <h2> tags and the <p> tags.. 

javascript lib 오류. 그래서 나는 easing 1.3 라이브러리를 사용할 수 있고 사용하고있는 twitter widdget을 사용하고있다.

내 CSS는 다음과 같습니다

.content { 
    margin-left: 5%; 
    margin-right: 5%; 
    width: 1400px; 
} 

.box { 
    float: left; 
    width: 950px; 
    margin-left: 20px; 
    position: relative; 
} 


#sub_content { 
    background-color: white; 
    width: 720px; 
    max-height: 462px; 
    min-width:600px; 
    margin: 0px 0px 0px 40px; 
    padding: 15px; 
    border: solid 1px black; 
    border-radius: 8px 8px 8px 8px; 
    overflow-y: auto; 
} 

.title { 
    text-align: right; 
    text-transform: uppercase; 
    border: 1px solid yellow; 
    margin: 0px 25px 5px 25px; 
    padding: 5px; 
    } 

#wall { 
    min-width: 300px; 
    margin:0px 0px 15px 15px; 
    width:655px; 
    border: 1px solid red; 
    float: left; 
    padding: 5px; 
    } 

.description { 
    margin: 0px 0px 10px 10px; 
    padding: 5px; 
    width: 630px; 
    border:1px solid green; 
    float: left; 
    } 

#decription p { 
    word-wrap: break-word; 
} 

    #demoimg { 
    float: left; 
    margin: 16px 8px 0px 0px; 
    height: 200px; 
    width: 200px; 

} 

편집 : 이 자바 스크립트 내가하려고했던 것입니다 :

<script type="text/javascript"> 
<!-- 
window.addEvent('domready', function() { 
var opt = { 
slides: 'description', 
duration: 1500, 
buttons: {next:'right',prev:'left'}, 
transition: Fx.Transitions.Quint.easeOut 
} 
var scroller = new QScroller('content',opt); 
scroller.load(); 
}); 
//--> 
</script> 

하지만이 나던 내 모든 자바 스크립트와 파일이 제대로 작동 내 디렉토리에 내가 ..

정말 가까이 와서 하나는 텍스트 및 이미지와 함께 수평 스크롤러에서 http://www.latenight-coding.com/mootools/classes/qscroller.html에 있습니다. 그러나 그것은 일하지 않는다!! 그게 내 머리카락을 꺼내게 해. 설명을 통해 루프를 돌리고 선택된 arnt를 숨기는 다른 방법이 있습니까 ??

어떤 도움이나 더 나은 참조의이 많이 주시면 감사하겠습니다 : D

Answer 1

당신은 Jquery Cycle를 사용하는 것이 좋습니다. easing을 사용하는 OUTSTANDING 플러그인으로 콘텐츠에 대한 설명과 이전/다음 버튼 또는 링크를 모두 가질 수 있습니다. 한 페이지에 여러 개의 슬라이드 쇼를 가질 수도 있으며, 한 슬라이드 쇼에 대한 링크를 여러 개 열어 놓은 헤어 풀러는 아닙니다.

매우 쉽게 사용할 수 있으며 맞춤 설정할 수 있습니다. 웹 사이트에는 코드가 포함 된 많은 예제가 있습니다.