問題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

回答

相關問題