Question

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

提前感谢您的任何帮助

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');
});
});

为了方便起见，这里的代码是jsfiddle.net

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

Answer 1

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

Answer 2

我认为我可以看到两个错误。一个是以下行中缺少的$符号：

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');
});

Answer 3

尝试指定边距

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

它应该是

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

div的问题滚动左右javascript

3 个答案: