图片n张,可视区显示三张,滑动后中间图片始终比左右两边大,这样的效果该怎么实现??
滑动监听怎么监听滑动一下过一张图片??
————————————点击实现(375x667)——————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 100%;
padding: 0 17px;
box-sizing: border-box;
}
ul {
list-style: none;
}
.show-box {
width: 100%;
margin-top: 25%;
overflow: hidden;
}
.show-box ul {
width: 784px;
overflow: hidden;
display: flex;
align-items: center;
}
.show-box ul li {
display: block;
float: left;
width: 95px;
height: 140px;
margin-right: 15px;
border-radius: 10px;
border: 1px solid;
}
.show-box ul li:last-of-type {
margin-right: 0;
}
.show-box ul li img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.show-box ul li.big {
width: 110px;
height: 160px;
}
.control-btn,
.control-btn ul {
width: 100%;
overflow: hidden;
}
.control-btn {
margin-top: 30px;
}
.control-btn ul {
display: flex;
justify-content: center;
}
.control-btn ul li {
width: 40px;
height: 25px;
line-height: 25px;
float: left;
text-align: center;
font-size: 20px;
}
.control-btn ul li.noclick {
color: gainsboro;
}
</style>
</head>
<body>
<div id="wrap">
<div class="show-box">
<ul>
<li>1</li>
<li class="big">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<div class="control-btn">
<ul>
<li class="left noclick">《</li>
<li class="right">》</li>
</ul>
</div>
</div>
<script src="./zepto.min.js"></script>
<script>
// big li 宽度不加外边距
let li_big_width = 112;
// li 宽度+15margin-right
let li_width = 97 + 15;
// img_count:图片总数, show_img:可视区数量, ul_width :ul长度, img_count: 要显示的图片总数
let count = 0,
show_img = 3,
img_count = $('.show-box ul li').length,
ul_width = (img_count - 1) * li_width + li_big_width;
// 设置ul宽度
$('.show-box ul').css('width', ul_width + 'px');
// 左击
$('.left').on('click', function () {
count--;
$('.right').removeClass('noclick');
// console.log('左击' + count)
if (count < 0) {
$(this).addClass('noclick');
count = ++count;
} else {
$('right').removeClass('noclick');
let margin_left_tmp = parseInt($('.show-box ul').css('margin-left'));
console.log(margin_left_tmp);
$('.show-box ul').css('margin-left', margin_left_tmp + li_width + 'px');
$('.big').removeClass('big').prev().addClass('big');
}
});
// 右击
$('.right').on('click', function () {
++count;
console.log('右击' + count);
$('.left').removeClass('noclick');
if (count > (img_count - show_img)) {
$(this).addClass('noclick');
count = --count;
} else {
$('.show-box ul').css('margin-left', '-' + count * li_width + 'px');
$('.big').removeClass('big').next().addClass('big');
}
})
</script>
</body>
</html>
swiper可以实现
https://www.swiper.com.cn/dem...