|
实现效果图：
直接上代码
![]()
![]()
减
加
import banner1 from '@/assets/images/banner1.png'
import banner2 from '@/assets/images/banner2.png'
import banner3 from '@/assets/images/banner3.png'
import banner4 from '@/assets/images/taitan1.jpg'
import banner5 from '@/assets/images/taitan2.jpg'
import banner6 from '@/assets/images/s8.jpg'
import banner7 from '@/assets/images/s1.jpg'
import test1 from '@/assets/images/s2.png'
import test2 from '@/assets/images/s3.jpg'
import test3 from '@/assets/images/s4.jpg'
import test4 from '@/assets/images/s4.png'
import test5 from '@/assets/images/s8.jpg'
import test6 from '@/assets/images/s7.jpg'
import {nextTick} from "vue";
let props = defineProps({
propsData:{
type:Array,
default: [
{imgUrl: test1},
{imgUrl: test2},
{imgUrl: test3},
{imgUrl: test4},
{imgUrl: test5},
{imgUrl: test6},
{imgUrl: banner1},
{imgUrl: banner2},
{imgUrl: banner3},
{imgUrl: banner4},
{imgUrl: banner5},
{imgUrl: banner6},
{imgUrl: banner7},
]
}
})
let state = reactive({
imgList: []
})
const { imgList } = toRefs(state)
let itemBox = ref(null) // 存放所有图片dom
function right() {
// 点一次加号，就循环让当前数组的索引加一，循环后强制刷新数据，让数据更新，达到视图更新
let zero = state.imgList[0] //保存第一个，以免进入循环第一个和最后一个重复
for (let i = 0; i < state.imgList.length; i++) {
if (i == state.imgList.length - 1) {
state.imgList[i] = zero
} else {
state.imgList[i] = state.imgList[i + 1]
}
}
updateData(props.propsData,null)
cuttentShadowStyle()
}
function left() {
// 点一次减号，就循环让当前数组的索引减一，循环后强制刷新数据，让数据更新，达到视图更新
let last = state.imgList[state.imgList.length - 1] //保存最后一个，以免进入循环第一个和最后一个重复
for (let i = state.imgList.length - 1; i >= 0; i--) {
if (i == 0) {
state.imgList[i] = last
} else {
state.imgList[i] = state.imgList[i - 1]
}
}
cuttentShadowStyle()
}
function setStyle() {
// 一开始就根据数据的奇偶数来确定中位数，中位数一般都是奇数，如果数组的length为5，则中位数为2
// 基于中位数，给每个元素设置相应的类，类控制元素的大小
let Axis = null
itemBox.value = document.getElementsByClassName('itemBox')
Axis = parseInt(state.imgList.length / 2) //拿到中间数
itemBox.value[Axis].className = "current itemBox";
if (Axis - 1 >= 0) {
itemBox.value[Axis - 1].className = "current1 itemBox";
}
if (Axis - 2 >= 0) { //左边第一个
itemBox.value[Axis - 2].className = "current2 itemBox";
}
if (Axis + 1 {
itemBox.value[Axis].style.boxShadow = `0px 0px 0px 0px #D3E7FF`
itemBox.value[Axis].style.borderRadius = `0px`
itemBox.value[Axis].style.transform = `scale(1)`
},500)
}
// 当图片数据大于5时，做处理 用于更新数据，每次跳转都执行一次
function updateData(data,isOne){
// isOne是否是第一次执行此方法,用于初始化数据，只执行一次
if (isOne){ // 只执行一次
for (let i=0;i=5);
if (isShow.value){
updateData(props.propsData,true)
nextTick(() => {
setStyle()
tumble()
})
}
}
onMounted(() => {
initData()
})
onUnmounted(()=>{ // 清除定时器
window.clearInterval(timer.value)
window.clearInterval(shadowTimer.value)
})
.oneBox{
width: 1840px;
height: 530px;
border: 1px solid blue;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 75px;
position: relative;
.oneItemBox{
width: 295px;
height: 295px;
border: 1px solid #11ff00;
position: relative;
overflow: hidden;
img {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
}
}
.box {
width: 1840px;
height: 530px;
border: 1px solid red;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: end;
padding-bottom: 75px;
position: relative;
.itemBox{
position: relative;
transition: all 0.5s;
img {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
&:hover{
border-radius: 20px;
transform: scale(1.02);
}
}
.left, .right {
position: absolute;
bottom: 20px;
cursor: pointer;
}
.left {
margin-right: 40px;
}
.right {
margin-left: 40px;
}
}
.current {
width: 402px;
height: 402px;
border: 1px solid red;
}
.current1 {
width: 295px;
height: 295px;
border: 1px solid #11ff00;
}
.current2 {
width: 241px;
height: 241px;
border: 1px solid #0059ff;
}
实现思路
1、初始化的时候，给当前五个图片设置固定的样式（中间图片大，两边小）
2、点击两边某个图片要是显示在中间时，当前的图片位置与中间位置进行互换
3、点击右边小图标或者点击下一张时，每个图片当前位置下标加一，当加到下标超过数组数据长度时，下标重置0开始，循环（点击左边相反）
4、每换一次下标，最中间的图片都要放大，总之按照自己需求，添加变化样式
5、单数据超过5条时，每一次切换图片下标时，都更新数据，这里需要两个数组数据，一个数组（A）存放5个，用户页面的显示。另一个数组（B）数据则是当前一共有多少张图片。每一次下标更改，都要从B里面拿到一个数据放到A里面去刷新数据
|