JavaScript 在 html/css 内容中旋转

Question

您好，我目前正在从纯粹的 html/css/javascript 制作一个演示站点，通常我会使用 ruby​​ 并只渲染部分来解决这个问题，但是为了使用 javascript 进行一些练习，我虽然这可能是一个有趣的挑战，并且它一直!所以我所做的是一段代码，其中包含一个用文字包裹的图像。我在内容 block 的两侧放置了按钮。我的目标是让这些按钮隐藏，直到鼠标悬停并单击带有图像的内容将旋转到不同的图像和描述。这些集合 block 将被分组到选项卡中。例如，在主页选项卡上将有四个内容集合，我可以在其中轮换，然后下一个选项卡将是产品，如果我单击该选项卡，将有三个内容集合，每个产品一个，每个都包含图片和描述..

很酷，到目前为止我所拥有的是这是我的 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 库错误。所以我正在使用 以便我可以使用缓动 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;

 }

编辑: 这是我正在尝试的 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 的文件..

真正接近的是 http://www.latenight-coding.com/mootools/classes/qscroller.html在带有文本和图像的水平滚动条下。但它不起作用!这让我拔掉了头发。有没有另一种方法可以循环遍历描述并隐藏未选中的描述？？

任何帮助或更好的引用将不胜感激:D

Answer 1

您可以考虑使用 Jquery Cycle .这是一个使用缓动的出色插件，可以让您同时拥有内容描述和上一个/下一个按钮或链接。您还可以在一个页面上放多个幻灯片，将一个幻灯片的链接打开多个可能不是一件容易的事，因为这似乎就是您要找的东西。

它开箱即用且可高度自定义。该网站有大量示例代码。