Question

您好，我目前正在制作一个纯粹的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 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;

 }

编辑：这是我正在尝试的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。它是一个使用缓动的OUTSTANDING插件，允许您同时拥有内容的描述和上一个/下一个按钮或链接。您还可以在一个页面上放置多个幻灯片，并且可能没有一个能够打开几个幻灯片的链接，因为这似乎是您正在寻找的。

它非常容易开箱即用，并且可以高度自定义。该网站有很多带代码的例子。

JavaScript通过html / css内容旋转

1 个答案: