Проблемы с реализацией ползунка JQuery

Я пытался реализовать в слайдере в JQuery. Я застрял в одном месте. Вот мой код до сих пор.Проблемы с реализацией ползунка 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>

Удаление комментариев из класса = «box5» дает мне некоторые вопросы, которые я выделил в приведенных выше замечаний. Я хотел бы знать, где я ошибаюсь. Кроме того, для слайдера я планирую изменить свойства margin-left/right. Правильно ли реализован слайдер? Помогите!!

источник

2012-01-27 Cafecorridor

Ну, для меня действительно сложно сказать, что именно вы хотите в качестве желаемого результата.

Я даже бросил this jsFiddle вместе, чтобы попытаться выяснить это. Вставка 5 не видна в скрипке. Но тогда jsFiddle установлен на юниор 1.7. Почему вы используете jQuery 1.4 ???

источник

2012-01-27 10:03:59 Scott

Да, box5 не виден пользователю. Если вы проверите его положение в firebug, оно появится в нижней части box1. Я хочу, чтобы он переполнялся вправо, чтобы я мог реализовать функциональность ползунка. Вы поняли? Кроме того, в книге, к которой я сейчас обращаюсь, используется jQuery 1.4. – Cafecorridor

Хорошо, я внесла некоторые изменения в код. Проверьте это сейчас. Скольз, похоже, дает мне желаемый эффект. Я сделаю некоторые изменения и посмотрю, сталкиваются ли я с другими проблемами. Благодарю. Дизайн неправильный, однако это не моя проблема прямо сейчас. Я просто сосредоточен на функциональности. – Cafecorridor

Реализовать это http://www.slidedeck.com

источник

2012-03-06 13:38:37

Проблемы с реализацией ползунка JQuery

ответ

Смежные вопросы