gpt4 book ai didi

javascript - 水平 Div 滚动

转载 作者:行者123 更新时间:2023-11-30 15:24:49 24 4
gpt4 key购买 nike

我是 Jquery 的新手,我正在尝试使用 scrollLeft 属性在 div 上实现水平滚动,我没有收到任何错误消息,而且似乎没有任何效果,有人可以解释为什么吗?提前致谢这是我的代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
$(document).ready (function(){
var pos = $("#container").scrollLeft();
$(".prev").click(function(){
$("#container").animate({
scrollLeft: pos - 200;
});
});
});



</script>
<style>
#container{
max-width: 938px;
height: 500px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
overflow: scroll;
/*display: table;*/
}
.picsdiv{
display: table-cell;
min-width: 286px;
padding-right: 80px;
height: 508px;
border: 2px solid pink;

}

.prev, .next {
cursor: pointer;
position: absolute;
top: 250px;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
border: 2px solid pink;
}

.next {
right: 170px;
border-radius: 3px 0 0 3px;
}
.prev{
left: 170px;
}

.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
  
<body>
<div id="container">
<div class="picsdiv">

</div>
<div class="picsdiv">

</div>
<div class="picsdiv">

</div>
<div class="picsdiv">

</div>
<a class="prev">&#10094;</a>
<a class="next">&#10095;</a>
</div>

</body>

最佳答案

去掉这一行的分号就可以了

scrollLeft: pos - 200;

关于javascript - 水平 Div 滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43161711/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com