成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

3403771864 / 907人閱讀

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

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

　　效果：

　　html

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

　　<template>
　　<div>
　　<div class="zs-adv">
　　<a title="上一頁" :href="'#'" class="adv-pre" @click="leftScroll">上一個</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="下一頁" :href="'#'" class="adv-next" @click="rightScroll">下一個</a>
　　</div>
　　</div>
　　</template>
　　js

　　通過點擊事件去執(zhí)行響應(yīng)過程

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/128212.html

相關(guān)文章

  • task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

    摘要：獲取下一個元素節(jié)點，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個元素節(jié)點為選擇中，調(diào)用運動框架實現(xiàn)動畫，添加定時器，調(diào)用該函數(shù)，實現(xiàn)自動播放。移出時，開啟定時器，繼續(xù)輪播。輪播間隔時間單位為毫秒，默認為，在內(nèi)部，以下部分進行修改或添加。 轉(zhuǎn)載自我的個人博客 歡迎大家批評指正 包括5部分： 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...

    cnTomato 評論0 收藏0

  • task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

    摘要：獲取下一個元素節(jié)點，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個元素節(jié)點為選擇中，調(diào)用運動框架實現(xiàn)動畫，添加定時器，調(diào)用該函數(shù)，實現(xiàn)自動播放。移出時，開啟定時器，繼續(xù)輪播。輪播間隔時間單位為毫秒，默認為，在內(nèi)部，以下部分進行修改或添加。 轉(zhuǎn)載自我的個人博客 歡迎大家批評指正 包括5部分： 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...

    趙春朋 評論0 收藏0

  • vue.js 移動端音樂app（一） 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實現(xiàn) （1）功能 對 better-scroll 插件的基本封裝，實現(xiàn)移動端的滾動 （2）實現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項之一 （1）取值： 1 滾動的時候會派發(fā) scroll 事件，會截流。 2 滾動的時候?qū)崟r派發(fā) scroll 事件，不會截流。 3 除了實時派發(fā) scroll 事件，在 swipe 的情況...

    wqj97 評論0 收藏0

  • vue.js 移動端音樂app（一） 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實現(xiàn) （1）功能 對 better-scroll 插件的基本封裝，實現(xiàn)移動端的滾動 （2）實現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項之一 （1）取值： 1 滾動的時候會派發(fā) scroll 事件，會截流。 2 滾動的時候?qū)崟r派發(fā) scroll 事件，不會截流。 3 除了實時派發(fā) scroll 事件，在 swipe 的情況...

    FingerLiu 評論0 收藏0

  • vue.js 移動端音樂app（一） 基礎(chǔ)組件 scroll

    一、 基礎(chǔ)實現(xiàn) （1）功能 對 better-scroll 插件的基本封裝，實現(xiàn)移動端的滾動 （2）實現(xiàn) 引入 better-scroll props probeType: better-scroll 配置項之一 （1）取值： 1 滾動的時候會派發(fā) scroll 事件，會截流。 2 滾動的時候?qū)崟r派發(fā) scroll 事件，不會截流。 3 除了實時派發(fā) scroll 事件，在 swipe 的情況...

    MadPecker 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<