Fatal编程技术网
  • jquery/
  • 我自己实现了一个JQuery滑块-不是很好

我自己实现了一个JQuery滑块-不是很好

jquery

我自己实现了一个JQuery滑块-不是很好,jquery,Jquery,虽然我以前在J2ee/C/C++方面有经验，但我对Javascript和JQuery都是新手。我自己创建了一个JQuery滑块。这是完整的源代码- <!DOCTYPE html> <html> <head> <title>Experimentation</title> <style type="text/css"> #container { overflow:hidden; position: rela

虽然我以前在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>


实验
#容器{
溢出：隐藏；
位置：相对位置；
高度：200px；
宽度：800px；
背景色：白色；
浮动：左；
}   
#滑块{
宽度：876px；
高度：200px；
背景色：黑色；
保证金：0自动；
}
.box1、.box2、.box3、.box4、.box5、.box6、.box7、.box8{
宽度：200px；
高度：200px；
背景颜色：灰色；
z指数：10000；
位置：相对位置；
浮动：左；
溢出：隐藏；
}
.信息1、.信息2、.信息3、.信息4、.信息5、.信息6、.信息7、.信息8{
位置：绝对位置；
宽度：200px；
高度：200px；
背景色：黑色；
不透明度：0.2；
过滤器：α（不透明度=40）；
顶部：170px；
颜色：#FFF；
}
.信息1 h3、.信息2 h3、.信息3 h3、.信息4 h3、.信息5 h3、.信息6 h3、.信息7 h3、.信息8 h3{
保证金：3px 3px；
文本对齐：居中；
}
.左按钮img{
光标：指针；
浮动：左；
}
.右按钮img{
光标：指针；
浮动：对；
}
var topInitial=“0”；
var topfafter=“170px”；
var-sliderPos=1；
var时长=1；
$（函数（）{
$（“.box1”）.mouseenter（函数（）{
$（“.information1”）.animate({
顶部：topInitial}，“正常”）；}）；
$（“.box1”）.mouseleave（函数（）{
$（“.information1”）.animate({
top:topAfter}，“normal”）；}）；
$（“.box2”）.mouseenter（函数（）{
$（“.information2”）.animate({
顶部：topInitial}，“正常”）；}）；
$（“.box2”）.mouseleave（函数（）{
$（“.information2”）.animate({
top:topAfter}，“normal”）；}）；
$（“.box3”）.mouseenter（函数（）{
$（“.information3”）.animate({
顶部：topInitial}，“正常”）；}）；
$（“.box3”）.mouseleave（函数（）{
$（“.information3”）.animate({
top:topAfter}，“normal”）；}）；
$（“.box4”）.mouseenter（函数（）{
$（“.information4”）.animate({
顶部：topInitial}，“正常”）；}）；
$（“.box4”）.mouseleave（函数（）{
$（“.information4”）.animate({
top:topAfter}，“normal”）；}）；
$（“.box5”）.mouseenter（函数（）{
$（“.information5”）.animate({
顶部：topInitial}，“正常”）；}）；
$（“.box5”）.mouseleave（函数（）{
$（“.information5”）.animate({
top:topAfter}，“normal”）；}）；
$（“.box6”）.mouseenter（函数（）{
$（“.information6”）.animate({
顶部：topInitial}，“正常”）；}）；
$（“.box6”）.mouseleave（函数（）{
$（“.information6”）.animate({
top:topAfter}，“normal”）；}）；
$（“.box7”）.mouseenter（函数（）{
$（“.information7”）.animate({
顶部：topInitial}，“正常”）；}）；
$（“.box7”）.mouseleave（函数（）{
$（“.information7”）.animate({
top:topAfter}，“normal”）；}）；
$（“.box8”）.mouseenter（函数（）{
$（“.information8”）.animate({
顶部：topInitial}，“正常”）；}）；
$（“.box8”）.mouseleave（函数（）{
$（“.information8”）.animate({
top:topAfter}，“normal”）；}）；
$（“.leftbutton img”）。单击（函数（）{
如果（滑块==1）
{
$（“.box1”）.animate({
marginLeft:“-200px”}，时长）；
}
else if（滑块==2）
{
$（“.box2”）.animate({
marginLeft:“-200px”}，时长）；
}
else if（滑块==3）
{
$（“.box3”）.animate({
marginLeft:“-200px”}，时长）；
}
else if（滑块==4）
{
$（“.box4”）.animate({
marginLeft:“-200px”}，时长）；
}
其他的
{
返回；
}
sliderPos++；
});
$（“.rightbutton img”）。单击（函数（）{
如果（滑块==2）
{
$（“.box1”）.animate({
marginLeft:“+=200px”}，时长）；
}
else if（滑块==3）
{
$（“.box2”）.animate({
marginLeft:“+=200px”}，时长）；
}
else if（滑块==4）
{
$（“.box3”）.animate({
marginLeft:“+=200px”}，时长）；
}
else if（滑块==5）
{
$（“.box4”）.animate({
marginLeft:“+=200px”}，时长）；
}
其他的
{
返回；
}
幻灯片--；
});
});
给苹果的一份礼物
你以前从未见过这样的事情

B代表球
你以前从未见过这样的事情

C代表猫
你以前从未见过这样的事情

为狗准备的食物
你以前从未见过这样的事情

大象的食物
你以前从未见过这样的事情

F代表青蛙
你以前从未见过这样的事情

蚱蜢
你以前从未见过这样的事情

H表示角质；）
你以前从未见过这样的事情
现在我的重点是功能。我稍后会处理设计方面的问题。所以我的问题是-

  • 这是实现滑块的正确方法吗？我刚刚使用了常识和JQuery/CSS的一些知识来创建它。我能用更好的方法吗？如果是，如何进行

  • 当我将代码中的“timeDuration”值更改为“slow”时，滑动并不平滑，如中所示，当元素向左或向右移动时，会出现白色斑块。如何纠正这个问题

  • 当我第一次重新加载页面并单击左箭头4次时，元素会移动到哪里？他们如何在页面上重新定位？我不清楚这个概念

    • 救命啊

    编辑：没有人觉得这个滑块足够好吗？我需要帮助（

    我是为你准备的，但我没有t 
    $('.box').hover(
    function() {
        $(this).find('.information')
            .animate({top: topInitial }, "normal");
    },
    function() {
        $(this).find('.information')
            .animate({top: topAfter }, "normal");
    }
);