问题div窗口左右滚动javascript

我尝试了一切，但没有运气。我不知道我做错了什么。请帮帮我！我所要做的就是创建一个可以滚动schedule-background-container左右的按钮。问题div窗口左右滚动javascript

预先感谢您的任何帮助

HTML

<div id="schedule-background"> 
<div id="schedule-heading-container"> 
    <div id="schedule-button-right"></div> 
    <div id="schedule-button-left"></div> 
    <div id="schedule-background-overall"> 
     <div class="schedule-background-container"> 
       <h2 class="schedule-date">July 23</h2> 

      <ul class="schedule-ul"> 
       <li class="schedule-title"><a href="#">Homework</a> 
       </li> 
       <li class="schedule-other">10:00AM</li> 
       <li class="schedule-title"><a href="#">Firework</a> 
       </li> 
       <li class="schedule-other">11:00AM</li> 
       <li class="schedule-title"><a href="#">Dexter</a> 
       </li> 
       <li class="schedule-other">12:00PM</li> 
      </ul> 
     </div> 
     <div class="schedule-background-container"> 
       <h2 class="schedule-date">July 24</h2> 

      <ul class="schedule-ul"> 
       <li class="schedule-title"><a href="#"> hello</a> 
       </li> 
       <li class="schedule-other">9:30am</li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS

#schedule-button-right { 
background-color: grey; 
position: absolute; 
width: 9px; 
height: 8px; 
margin-top: 10px; 
margin-left: 145px; 
cursor: pointer; 
z-index: 2; 
} 
#schedule-button-left { 
background-color: grey; 
position: absolute; 
width: 9px; 
height: 8px; 
margin-top: 10px; 
margin-left: 5px; 
cursor: pointer; 
z-index: 2; 
} 
#schedule-background { 
background-color: white; 
position: absolute; 
margin-top: 120px; 
margin-left: 10px; 
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); 
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); 
width:160px; 
height: 600px; 
float: left; 
overflow: hidden; 
} 
#schedule-heading-container { 
background: #088a26; 
width: 160px; 
height: 25px; 
} 
#schedule-background-overall { 
min-width: 320px; 
float: left; 
position:relative; 
} 
.schedule-background-container { 
width:160px; 
height:600px; 
float: left; 
position:relative; 
} 
.schedule-date { 
color: #ffffff; 
text-align: center; 
margin-top: 0; 
padding-top: 3px; 
font: Calibri; 
font-size: 18px; 
} 
.schedule-title { 
font-size: 14px; 
font-weight: bold; 
text-align: left; 
} 
.schedule-other { 
font-size: 12px; 
padding-bottom: 3px; 
} 
.schedule-ul { 
position:relative; 
margin-top:10px; 
height:550px; 
list-style:none; 
padding-left: 10px; 
} 
.schedule-ul li a { 
text-decoration: none; 
color:#0d5887; 
} 
.schedule-ul li a:hover { 
text-decoration:underline; 
}

的Javascript

$(document).ready(function() { 
var $item = $('div#schedule-background-overall'); 
$('div#schedule-button-right').click(function() { 
    $item.animate({ 
     'left': '-=160px' 
    }, 'slow'); 
}); 
$('div#schedule-button-left').click(function() { 
    $item.animate({ 
     'left': '+=160px' 
    }, 'slow'); 
}); 
});

为了使它更容易在这里是代码

再次，谢谢！ --------------------------解决--------------------- 没有加载库！谢谢大家的帮助！

来源

2013-07-25 stanley1943

您应该发布您的解决方案作为未来读者受益的答案，然后接受它。 –

我认为有从我所看到的两个错误。一个是$符号在下面的一行缺少：

var $item = ('div#schedule-background-overall');

将其更改为：var $item = $('div#schedule-background-overall');

另一种是资本 “L” 在下面：

$('div#schedule-button-right').click(function() { 
    $item.animate({ 
    'Left': '-=160px' // Change it to left in all lower-case 
    }, 'slow'); 
});

来源

2013-07-25 06:19:51 Harry

我改变了你提到的一切，但仍然没有运气。 – stanley1943

奇怪，现在有什么错误？检查此[小提琴]（http://jsfiddle.net/hari_shanx/TztBa/）与我的更改为工作版本。 – Harry

可能是jq库不包括 – Bharadwaj

尝试通过增加$作为 var $item = $('div#schedule-background-overall');

来源

2013-07-25 06:12:24 Bharadwaj

尝试assiging利润率

$item.animate({'margin-Left': '160px'},slow);

它应该是

var $item = $('div#schedule-background-overall');

来源

2013-07-25 06:33:45 rps

问题div窗口左右滚动javascript

回答

相关问题