JavaScriptがhtml/cssのコンテンツを回転しています

Question

こんにちは、私は現在、純粋なhtml/css/javascriptからデモサイトを作っています。通常、この問題を解決するためにルビーを使用していますが、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エラー。だから私はイージング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; 

} 

EDIT： これにはJavaScript私がしようとしていた次のとおりです。

<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> 

しかしこのdoesntのは、私はすべての私のjavascriptのあるファイルを持って働くように見えます私にリンクしている私のディレクトリ..

本当に近くに来たものはhttp://www.latenight-coding.com/mootools/classes/qscroller.htmlで、テキストと画像付きの水平スクロールです。しかし、それは動作しません！それは私に私の髪を引き出す。説明をループして選択されたものを隠す別の方法がありますか？

任意のヘルプまたはより良い参照のがはるかに高く評価されるだろう：D

Answer 1

あなたはJquery Cycleを使用して検討するかもしれません。それはイージングを使用して、あなたのコンテンツの説明と前/次のボタンやリンクの両方を持つことを可能にする卓越したプラグインです。また、1つのページに複数のスライドショーを表示することもできます。これは、探しているものと思われるように、1つのスライドショーへのリンクをいくつか開くようにするヘアプーラーではありません。

これは非常に簡単に動作し、高度にカスタマイズ可能です。このウェブサイトにはコードを使ったたくさんの例があります。