JavaScript在html/css内容中旋转

您好，我目前正在从纯html/css/javascript制作一个演示站点，通常我会使用ruby并只渲染部分来解决这个问题，但为了练习javascript，我认为这可能是一个有趣的挑战，而且一直如此！所以我所做的是一个代码块，它有一个用文字包装的图像。我将按钮放置在内容块的两侧。我的目标是让这些按钮隐藏起来，直到鼠标移过并再次单击带有图像的内容时，这些按钮将旋转到不同的图像和描述。这些集合块将被分组到选项卡中。例如，在“主页”选项卡上，将有四个我可以在其中旋转的内容集合，然后下一个选项卡将是产品，如果我单击该选项卡，将有三个内容集合，每个产品一个，每个集合将包含一个图像和一个描述

很酷，到目前为止我得到的是这是我的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：

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

但这似乎不起作用，我的目录中有一个包含所有javascript的文件，我链接到了

真正接近的是在水平滚动条下的文本和图像。但是它不起作用！！这让我把头发拔了出来。有没有其他方法可以循环浏览描述并隐藏arnt选择的描述

任何帮助或更好的参考都是值得赞赏的：D

P >你可以考虑使用。这是一个使用easing的优秀插件，它允许您同时拥有内容描述和上一个/下一个按钮或链接。你也可以在一个页面上有多个幻灯片，如果一个幻灯片的链接打开了几个，这可能不是一个拉毛器，因为这似乎是你正在寻找的

---

它非常容易开箱即用，并且高度可定制。该网站有大量代码示例。

您在上查看了旋转功能吗？我需要它是纯css，因为我们的大客户使用ie 8。我知道，但是他们非常挑剔，这是纯CSS，对吗？它没有使用Javascript。我正在尝试的Javascript可以在该链接上找到。只是一个包含一系列属性的函数。。但当我应用它时，它从未起作用？？我对javaScript持开放态度，我只有大约两周的使用经验。你说的javaScript是什么意思？我认为CSS3Generator生成纯CSS。例如，在您的例子中，您可以尝试“变换”，然后插入1表示缩放，插入旋转角度表示旋转，插入0表示平移，插入0表示倾斜。我没有看到任何Javascript。嘿，我整个上午都在玩这个！“你创造了我的一天！！”我仍然在努力，但它似乎在做它的本意。我也在使用easing插件，这是对它的赞美！！非常感谢：Dyeah，这是我找到的最好的幻灯片插件。当然最容易使用。很高兴它帮助了你！

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