Question

我一直在尝试在JQuery的滑块中实现。我被困在一个地方。到目前为止，这是我的代码。

    <!DOCTYPE html>
<html>
  <head>
    <title>Experimentation</title>
    <style type="text/css">

#container {
overflow:hidden;
height: 200px;
margin: 0 auto;
width: 800px;
background-color: white;
}   


.box1, .box2, .box3, .box4, .box5 {
  width: 200px;
  height: 200px;
  background-color: gray;
  z-index: 10000;
  position: relative;
  float: left;
  overflow:hidden;
  }


.information1, .information2, .information3, .information4, .information5 {
  position: absolute;
  width: 200px;
  height:200px;
  background-color: black;
  opacity: 0.2;
  top: 150px;
  color: #FFF;
}

.information1 h3, .information2 h3,.information3 h3, .information4 h3, .information5 h3   {
 margin: 3px 3px; 
 text-align: center;
}

.leftbutton img {
cursor:pointer;
}

.rightbutton img {
cursor:pointer;
}

    </style>
    <script type="text/javascript" src="jquery-1.4.js"></script>
    <script type="text/javascript">
      var topInitial = "0";
      var topAfter = "150px";

      $(function() {

      $(".box1").mouseenter(function() {    
      $(".information1").animate({
      top: topInitial }, "normal"); });

      $(".box1").mouseleave(function() {
      $(".information1").animate({
      top: topAfter }, "normal"); });


      $(".box2").mouseenter(function() {    
      $(".information2").animate({
      top: topInitial }, "normal"); });

      $(".box2").mouseleave(function() {
      $(".information2").animate({
      top: topAfter }, "normal"); });

       $(".box3").mouseenter(function() {   
      $(".information3").animate({
      top: topInitial }, "normal"); });

      $(".box3").mouseleave(function() {
      $(".information3").animate({
      top: topAfter }, "normal"); });

       $(".box4").mouseenter(function() {   
      $(".information4").animate({
      top: topInitial }, "normal"); });

      $(".box4").mouseleave(function() {
      $(".information4").animate({
      top: topAfter }, "normal"); });

      $(".box5").mouseenter(function() {    
      $(".information5").animate({
      top: topInitial }, "normal"); });

      $(".box5").mouseleave(function() {
      $(".information5").animate({
      top: topAfter }, "normal"); });

      $(".leftbutton img").click(function() {
      $(".box1").animate({
      marginLeft: "-=200px" }, "fast"); });

      $(".rightbutton img").click(function() {
      $(".box1").animate({
      marginLeft: "+=200px" }, "fast"); });

     });
    </script>
  </head>

  <body>
  <div class="leftbutton"><img src="left.gif"/></div>
  <div id="container">

  <span class="box1">
  <div class="information1">
  <h3> Criminal Penguins Having a Ball </h3>
  <p> You have never seen something like this before!</p>
  </div>
  </span>

  <span class="box2">
  <div class="information2">
  <h3> Criminal Penguins Having a Ball </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box3">
  <div class="information3">
  <h3> Criminal Penguins Having a Ball </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box4">
  <div class="information4">
  <h3> Criminal Penguins Having a Ball </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>


  <span class="box5">
  <div class="information5">
  <h3> Criminal Penguins Having a Ball </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  </div>
  <span class="rightbutton"><img src="right.gif"/></span>
  </body>
</html>

从class =“box5”中删除评论会给我一些我在上面的评论中突出显示的问题。我想知道我哪里出错了。此外，对于滑块我打算更改边距左/右属性。这是滑块实现的正确方法吗？帮助！

Answer 1

嗯，对我来说，很难说出你想要的是什么样的结果。

我甚至把this jsFiddle放在一起试图找出来。方框5在小提琴中不可见。但随后，jsFiddle将进入juery 1.7。你为什么使用jQuery 1.4 ???

Answer 2

实施此目的 http://www.slidedeck.com

JQuery Slider实现问题

2 个答案: