左右按钮使用css层级布局，左右滑动使用jquery animate效果。可根据自己项目实际需要进行扩展，这里demo我们是展示4个，每次滑动一个，到开头和结束，再点击按钮没有效果
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内容滑块、图片幻灯片滚动demo</title>
<style>
body {
height : 100vh;
box-sizing : border-box;
padding-top : 40vh;
overflow : hidden;
}
.portrait-list {
margin : auto;
width : 350px;
height : 100px;
box-sizing : border-box;
padding : 15px 20px;
background-color : #f9f9f9;
position : relative;
overflow : hidden;
}
.portrait-list > img {
position : absolute;
z-index : 9;
top : 0;
bottom : 0;
width : 10px;
cursor : pointer;
box-sizing : initial;
background-color : #f9f9f9;
}
.list-left {
left : 0;
padding : 40px 0 34px 5px;
}
.list-right {
right : 0;
padding : 40px 5px 34px 0;
}
.list-content {
overflow : hidden;
white-space : nowrap;
}
.list-content > div {
display : inline-block;
width : 70px;
height : 70px;
margin-right : 6px;
}
.list-content > div img {
width : 100%;
height : 100%;
object-fit : cover;
}
.list-content > div:last-child {
margin-right : 0;
}
</style>
<script src="../assets/js/jquery.min.js"></script>
<body>
<div class="portrait-list">
<img class="list-left"
id="left-btn"
alt="向左按钮"
src="https://res.tuwan.com/templet/play/teacher/images/left_btn.png">
<div id="list-content"
class="list-content">
<div>
<img alt="用户头像"
src="https://img1.daofengdj.com/uploads/photo/20190727/ebr6ich3tsnurn613tr4p5enavua3fay.jpg">
</div>
<div>
<img alt="用户头像"
src="http://img4.tuwandata.com/v2/thumb/jpg/ZTVjMCw0ODAsNDgwLDksMywxLC0xLE5PTkUsLCw5MA==/u/www.tuwan.com/uploads/play/2068611546583115.jpg">
</div>
<div>
<img alt="用户头像"
src="http://img4.tuwandata.com/v2/thumb/jpg/NTYyOCw0ODAsNDgwLDksMywxLC0xLE5PTkUsLCw5MA==/u/www.tuwan.com/uploads/play/1837651546583100.jpg">
</div>
<div>
<img alt="用户头像"
src="https://img1.daofengdj.com/uploads/photo/20190708/weol20wvgsx2kckh0aba7jvb9sz4ci80.(null)">
</div>
<div>
<img alt="用户头像"
src="https://img1.daofengdj.com/uploads/photo/20190708/zkbjn5y5wih5begwe9kafq9xmrp0tpky.(null)">
</div>
<div>
<img alt="用户头像"
src="https://img1.daofengdj.com/uploads/photo/20190722/hbwgkkc7l27t72dvpw7l912we43clz5d.jpg">
</div>
</div>
<img class="list-right"
id="right-btn"
alt="向右按钮"
src="https://res.tuwan.com/templet/play/teacher/images/right_btn.png">
</div>
</body>
<script>
$(function() {
let portrait_list = $("#list-content");
let len = $("#list-content div").length;
let number = 0;
// 照片列表右侧按钮点击时触发
$("#right-btn").click(function() {
// len 减去你项目实际展示的几个区块，在这个demo里是4个
if (number < len - 4) {
number += 1;
// 使用jquery animate效果
portrait_list.animate({marginLeft : -83 * number}, 300);
}
});
// 照片列表左侧按钮点击时触发
$("#left-btn").click(function() {
if (number > 0) {
number -= 1;
// 使用jquery animate效果
portrait_list.animate({marginLeft : -83 * number}, 300);
}
});
})
</script>
</html>
网友评论