Question

虽然我之前有过J2ee / C / C ++的经验，但我是Javascript和JQuery的新手。我自己创建了一个JQuery滑块。这是完整的源代码 -

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

#container {
overflow:hidden;
position: relative;
height: 200px;
width: 800px;
background-color: white;
float: left;
}   

#slider {
width: 876px;
height: 200px;
background-color:black;
margin: 0 auto;
}

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


.information1, .information2, .information3, .information4, .information5, .information6, .information7, .information8 {
  position: absolute;
  width: 200px;
  height:200px;
  background-color: black;
  opacity: 0.2;
  filter:alpha(opacity=40);
  top: 170px;
  color: #FFF;
}

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

.leftbutton img {
cursor:pointer;
float:left;
}

.rightbutton img {
cursor:pointer;
float: right;
}

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

      $(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"); });

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

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

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

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

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

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



      $(".leftbutton img").click(function() {   

      if(sliderPos == 1)
      {
      $(".box1").animate({
      marginLeft: "-200px" },timeDuration);
      }
      else if(sliderPos == 2)
      {
       $(".box2").animate({
      marginLeft: "-200px" }, timeDuration);
      }
      else if(sliderPos == 3)
      {
       $(".box3").animate({
      marginLeft: "-200px" }, timeDuration);
      }
      else if(sliderPos == 4)
      {
       $(".box4").animate({
      marginLeft: "-200px" }, timeDuration);
      }
      else
      {
      return;
      }
      sliderPos++;
      });


      $(".rightbutton img").click(function() {

      if(sliderPos == 2)
      {
      $(".box1").animate({
      marginLeft: "+=200px" }, timeDuration); 
      }
      else if(sliderPos == 3)
      {
      $(".box2").animate({
      marginLeft: "+=200px" }, timeDuration);
      }
      else if(sliderPos == 4)
      {
      $(".box3").animate({
      marginLeft: "+=200px" }, timeDuration);
      }
      else if (sliderPos == 5)
      {
      $(".box4").animate({
      marginLeft: "+=200px" }, timeDuration);
      }
      else
      {
      return;
      }
      sliderPos--;

      });

     });
    </script>
  </head>

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

  <span id="container">
  <span class="box1">
  <div class="information1">
  <h3> A for Apple</h3>
  <p> You have never seen something like this before!</p>
  </div>
  </span>

  <span class="box2">
  <div class="information2">
  <h3> B for Ball </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box3">
  <div class="information3">
  <h3> C for Cat </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box4">
  <div class="information4">
  <h3> D for Dog</h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>


  <span class="box5">
  <div class="information5">
  <h3> E for Elephant </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

   <span class="box6">
  <div class="information6">
  <h3> F for Frog </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box7">
  <div class="information7">
  <h3> G for Grasshopper </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>

  <span class="box8">
  <div class="information8">
  <h3> H for Horny ;) </h3>
  <p> You have never seen something like this before!</p>
  </div>  
  </span>
  </span>

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

现在我的重点是功能。我稍后会处理设计方面的问题。所以我的问题是 -

这是实现滑块的正确方法吗？我刚刚使用常识和JQuery / CSS的一些知识来创建它。我可以用更好的方式做到吗？如果是，怎么做？
当我将代码中'timeDuration'的值更改为'slow'时，滑动不平滑，因为当元素向左或向右移动时会出现白色色块。如何纠正这个问题？
当我第一次重新加载页面并单击左箭头4次时，元素移动到哪里？他们如何重新定位页面？我不清楚这个概念。

HELP！

编辑：没有找到这个滑块足够好？我需要帮助！：（

Answer 1

我为你开始rewriting，但我现在没有时间完成它。

但是，您应该知道元素可以共享class，并且jQuery可以用于一次将事件绑定到多个元素。

这例如将mouseenter和mouseleave事件绑定到具有“box”类的所有元素，并使用位于当前元素内的类“information”激活所有元素，即是“盒子”元素;

$('.box').hover(
    function() {
        $(this).find('.information')
            .animate({top: topInitial }, "normal");
    },
    function() {
        $(this).find('.information')
            .animate({top: topAfter }, "normal");
    }
);

请参阅chainability，hover()和find()的jQuery API文档。

我自己实现了一个JQuery Slider - 印象不是很深刻

1 个答案: