В эти дни я был занят выпускным оформлением.На одну из страниц нужно поместить изображение карусели.Потом я слушал музыку и искал(чао)чтобы найти(си)дух(ан)чувство(ли),и вдруг нашел оригинальный клиент NetEase Cloud Music. Картинка-карусель очень красивая, поэтому я попытался сымитировать ее. Хотя это очень просто, мне повезло, что я сделал первый шаг.
окончательный эффект:
(Почему гифка такая маленькая? 😭 )
Позвольте мне дать вам скриншот:
Я использовал фреймворк Vue+less, чтобы написать эту карусельную карту.Одна из сложностей здесь - угол между левой и правой картинками.Поскольку я новичок, я некоторое время возился с этим.Надеюсь, боги не не смейся над этим~
ладно, не много ерунды, давайте к делу: Каждый должен знать принцип изображения карусели, поэтому позвольте мне повторить его еще раз (23333).Предположим, есть 6 изображений, расположите 6 изображений слева и оберните контейнером списка, поэтому ширина списка будет очень большой , тогда список имеет родительский контейнер div, ширина div равна размеру изображения, а его переполнение установлено как скрытое, где положение div является относительным, положение списка является абсолютным, и, наконец, изображение реализуется путем регулировки левого значения переключателя отображения списка.
html (шаблон шаблона) код:
Предварительный меньше кода:
.slider {
position: relative;
margin: 0 auto;
width: 468px;
height: 200px;
overflow: hidden;
ul {
position: absolute;
padding: 0;
width: 2808px;
li {
float: left;
list-style: none;
z-index: 3;
img {
width: 468px;
border-radius: 3px;
}
}
}
}
После того, как стиль карусели в середине написан, начните писать картинки слева и справа.Здесь нам нужно использовать свойство перспективы и css-функцию rotate().
perspectiveВид, используемый для установки позиции просмотра элемента.Следует отметить, что когда элемент определяет атрибут перспективы, его дочерние элементы получат эффект перспективы, а не сам элемент, поэтому нам нужно определить атрибут перспективы для родительского элемента. контейнер левого и правого изображений. Кроме того, в настоящее время ни один из браузеров не поддерживает атрибут перспективы 😅 , но Chrome и Safari поддерживают альтернативный атрибут -webkit-perspective 😜 , затем установите transform: rotate() для левого и правого изображений, чтобы создать 2D-вращение, регулируя значения угла в перспективе и повороте, Вы можете добиться эффекта изображений на левой и правой сторонах музыкальной карусели NetEase Cloud.
Меньше кода для левого и правого изображений:
.around {
perspective: 200;
-webkit-perspective: 200;
cursor: pointer;
.pre {
position: absolute;
height: 136px;
top: 31px;
left: 300px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transform: rotateY(7deg);
}
.next {
position: absolute;
height: 136px;
top: 31px;
left: 766px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
transform: rotateY(-7deg);
}
}
Наконец, поставьте маленькую точку под изображением карусели, чтобы пользователи могли щелкнуть, чтобы перейти к указанному изображению:
.pointer {
display: flex;
justify-content: center;
font-size: 20px;
line-height: 20px;
color: gray;
cursor: pointer;
:first-child {
color: orange;
}
li {
margin-right: 2px;
}
}
Таким образом записывается стиль изображения карусели, а затем пришло время написать js для реализации автоматического воспроизведения, переключения влево и вправо и нажатия на точку для прыжка. Логика здесь довольно простая, поэтому я не буду описывать их по порядку, мы в основном обращаем внимание на два критических момента Текущая картинка — это отображение левой и правой картинок и логика нажатия и переключения в двух случаях первой картинки и последней картинки.
js-код:
created () {
// 初始化小圆点的个数；
this.pointer.length = 6
// 设置定时器；
setInterval(() => {
this.replace(true)
}, 3000)
},
methods: {
replace (right, pointer) {
// 每次调用 replace 方法时，将之前橙色的小圆点 color 改成灰色；
this.$refs.pointer[this.index].style.color = 'gray'
// 通过传进来的第一个参数判断是向左还是向右切换；
this.index = right ? this.index += 1 : this.index -= 1
/** 如果有传第二个参数，即点击了小圆点，更改当前 index
因为点击第一个小圆点时传进来的 pointer 为 0，会被判为 false，
所以在点击圆点传参数时增加了 1，之后在赋值给 index 时需减去； **/
if (pointer) this.index = pointer - 1
// 实现主轮播图的 “无限循环”；
if (this.index > 5) {
this.index = 0
} else if (this.index < 0) {
this.index = 5
}
// 实现左右两侧图片的循环；
if (this.index === 0) {
this.$refs.pre.src = this.slider[5].src
this.$refs.next.src = this.slider[this.index + 1].src
} else if (this.index === 5) {
this.$refs.pre.src = this.slider[this.index - 1].src
this.$refs.next.src = this.slider[0].src
} else {
this.$refs.pre.src = this.slider[this.index - 1].src
this.$refs.next.src = this.slider[this.index + 1].src
}
// 给当前图片对应的小圆点 “上色”；
this.$refs.pointer[this.index].style.color = 'orange'
// 移动 list 的位置，即更换当前显示图片；
this.$refs.list.style.left = -(this.index * 468) + 'px'
}
}
Эпилог
На данный момент завершена упрощенная версия карусельной карты NetEase. Есть некоторые недостатки. Автор также старается изо всех сил ее улучшить. После того, как мы войдем в интерфейс, нам еще предстоит пройти долгий путь. надеюсь подбодрить вас вместе с вами ~ Конечно, если эта статья немного вдохновила вас, вы можете поставить лайк или добавить ее в закладки, это будет моей большей мотивацией 😊 .