div框中的内容左右滚动

最新推荐文章于 2024-05-08 10:05:10 发布

yusheng_DiDi

最新推荐文章于 2024-05-08 10:05:10 发布

阅读量9.2k

点赞数

文章标签： css3 jquery

本文链接：https://blog.csdn.net/yusheng_DiDi/article/details/78395358

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击左右滚动</title>
</head>
<body>
<style>
.text-chaochu-gundong{
overflow: hidden;
white-space: nowrap;
border: 1px solid;
height: 50px;
width: 600px;
display: inline-block;
}
.text-chaochu-gundong div{
width: 100px!important;
border: 1px solid;
background: burlywood;
display: inline-block;
height: 50px;
}
.yincang{
display: none!important;
}
.left-div{
display: inline-block;
}
.right-div{
display: inline-block;
}
</style>

<div class="left-div"><img src="../img/left-div-img.png"></div>
<div class="text-chaochu-gundong">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>

<div class="right-div"><img src="../img/right-div-img.png"></div>
</body>
<script src="../jquery/dist/jquery.min.js"></script>
<script>
//设置一个共享变量来取div的值
var i = 0;
//当点击右边触发的事件
$(document).on("click",".right-div",function(){
//首先进行循环如果div框中的div 是最后一个div 那么不让他进行滚动
var witdh_div = 0 ;
//获取大的div框中没有隐藏的div的宽度进行相加
$.each($(".text-chaochu-gundong").children("div"), function(idx,item) {
if(!$(item).hasClass("yincang")){
witdh_div +=$(item).width();
}
});
// 如果没有隐藏的div宽度相加小于最外层的div块，那么不进行左边的Div隐藏效果
if(witdh_div < $(".text-chaochu-gundong").width()){
return false;
}
//如果不是执行隐藏的操作
//获取当前按钮的上一层div块中的子类div 中的Div位置也就是刚才上面定义的div 进行左侧隐藏
$(this).prev("div").children("div").eq(i).addClass("yincang");
i += 1;

})
$(document).on("click",".left-div",function(){
//之所以进行判断是为了防止0-1 = -1 这种情况出现
if(i>0){
//用法相反
i = i-1;
$(this).next("div").children("div").eq(i).removeClass("yincang");
}
})
</script>
</html>