用Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換代碼演示

3403771864 發(fā)布于2022-10-26 22:15 / 855人閱讀

　　本篇文章就是講述Vue.js實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片切換的具體代碼，具體內(nèi)容如下：

　　從多種角度實(shí)現(xiàn)展示給大家。

　　效果：

　　html

　　通過(guò)v-for循環(huán)展示圖片列表itemlist，將圖片路徑保存在data中的itemlist中，添加上下按鈕的點(diǎn)擊事件。

　　<template>
　　<div>
　　<div class="zs-adv">
　　<a title="上一頁(yè)" :href="'#'" class="adv-pre" @click="leftScroll">上一個(gè)</a>
　　<div id="adv-pad-scroll">
　　<div class="adv-pad">
　　<img
　　class="adv-pad-item"
　　v-for="(item, index) in itemlist"
　　:key="index"
　　alt=""
　　:ref="`item${index}`"
　　:src="item.src"
　　/>
　　</div>
　　</div>
　　<a title="下一頁(yè)" :href="'#'" class="adv-next" @click="rightScroll">下一個(gè)</a>
　　</div>
　　</div>
　　</template>
　　js

　　通過(guò)點(diǎn)擊事件去執(zhí)行響應(yīng)過(guò)程

　<script>
　　export default {
　　name: "index",
　　components: {},
　　data() {
　　return {
　　maxClickNum: 0, // 最大點(diǎn)擊次數(shù)
　　lastLeft: 0, // 上次滑動(dòng)距離
　　clickNum: 0, // 點(diǎn)擊次數(shù)
　　itemlist: [
　　{
　　id: 0,
　　src: require("./image/1.png"),
　　},
　　{
　　id: 1,
　　src: require("./image/2.png"),
　　},
　　{
　　id: 2,
　　src: require("./image/3.png"),
　　},
　　{
　　id: 3,
　　src: require("./image/4.png"),
　　},
　　{
　　id: 4,
　　src: require("./image/5.png"),
　　},
　　{
　　id: 5,
　　src: require("./image/6.png"),
　　},
　　],
　　// imgx: 0,
　　// form: this.$form.createForm(this, { name: "horizontal_login" }),
　　};
　　},
　　//函數(shù)
　　methods: {
　　leftScroll() {
　　if (this.clickNum > 0) {
　　// 獲取當(dāng)前元素寬度
　　console.log(document.querySelectorAll(".adv-pad-item"));
　　let width =
　　document.querySelectorAll(".adv-pad-item")[this.clickNum - 1]
　　.offsetWidth;
　　// 公示：滾動(dòng)距離（元素的magin-left值） = 它自己的長(zhǎng)度 + 上一次滑動(dòng)的距離
　　console.log(document.getElementsByClassName("adv-pad"));
　　document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
　　this.lastLeft + width
　　}px`;
　　this.lastLeft = width + this.lastLeft;
　　// 點(diǎn)擊次數(shù)-3
　　this.clickNum = this.clickNum - 1;
　　// 如果點(diǎn)擊次數(shù)小于最大點(diǎn)擊次數(shù)，說(shuō)明最后一個(gè)元素已經(jīng)不在可是區(qū)域內(nèi)了，顯示右箭頭
　　if (this.clickNum < this.maxClickNum) {
　　this.showRightIcon = true;
　　}
　　}
　　},
　　rightScroll() {
　　// 如果點(diǎn)擊次數(shù)小于數(shù)組長(zhǎng)度-1時(shí)，執(zhí)行左滑動(dòng)效果。
　　if (this.clickNum < this.itemlist.length - 1) {
　　// 獲取當(dāng)前元素寬度
　　let width =
　　document.querySelectorAll(".adv-pad-item")[this.clickNum].offsetWidth;
　　// 獲取最后一個(gè)元素距離左側(cè)的距離
　　let lastItemOffsetLeft =
　　document.getElementsByClassName("adv-pad-item")[
　　this.itemlist.length - 1
　　].offsetLeft;
　　// 獲取可視區(qū)域?qū)挾?　　const lookWidth = document.getElementById("adv-pad-scroll").clientWidth;
　　// 如果最后一個(gè)元素距離左側(cè)的距離大于可視區(qū)域的寬度，表示最后一個(gè)元素沒(méi)有出現(xiàn)，執(zhí)行滾動(dòng)效果
　　if (lastItemOffsetLeft > lookWidth) {
　　// 公示：滾動(dòng)距離（元素的magin-left值） = 負(fù)的它自己的長(zhǎng)度 + 上一次滑動(dòng)的距離
　　document.getElementsByClassName("adv-pad")[0].style.marginLeft = `${
　　-width + this.lastLeft
　　}px`;
　　this.lastLeft = -width + this.lastLeft;
　　// 點(diǎn)擊次數(shù)+3
　　this.clickNum += 1;
　　// 記錄到最后一個(gè)元素出現(xiàn)在可視區(qū)域時(shí)，點(diǎn)擊次數(shù)的最大值。用于后面點(diǎn)擊左側(cè)箭頭時(shí)判斷右側(cè)箭頭的顯示
　　this.maxClickNum = this.clickNum;
　　}
　　this.showRightIcon = lastItemOffsetLeft > lookWidth + width;
　　}
　　},
　　},
　　};
　　</script>

　　css

　　<style scoped>
　　.zs-adv {
　　margin: 50px auto 0;
　　width: 1272px;
　　height: 120px;
　　background: url("./image/adv-bg.png") top center no-repeat;
　　a {
　　margin-top: 58px;
　　width: 16px;
　　height: 24px;
　　opacity: 0.8;
　　}
　　a:hover {
　　opacity: 1;
　　}
　　.adv-pre {
　　float: left;
　　margin-right: 20px;
　　}
　　.adv-next {
　　float: right;
　　}
　　#adv-pad-scroll {
　　float: left;
　　width: 1200px;
　　overflow: hidden;
　　.adv-pad {
　　width: 2400px;
　　height: 120px;
　　.adv-pad-item {
　　padding: 20px 10px 0px 10px;
　　width: 400px;
　　height: 100px;
　　cursor: pointer;
　　animation: all 1.5s;
　　}
　　.adv-pad-item:hover {
　　padding: 10px 5px 0px 10px;
　　}
　　}
　　}
　　}
　　</style>

本篇文章已講述完畢，歡迎大家關(guān)注更多后續(xù)內(nèi)容。