寫了1天 我把它抽象成組件 ，下次要用的使用引用一下就好（代碼在下面）
定時輪播
鼠標進入時候（用戶操作）取消 定時輪播
鼠標按下 的x坐標 和 抬起的x坐標 不一樣 就是在拖拽圖片
不然就是單純點擊圖片 進入對應頁面
調用方
</template>
? <!--? 數(shù)據(jù) 、 輪播圖的 寬 和 高-->
? <swiper :imgList="imgList" style="width: 900px; height: 512px;"/>
</template>
<script>
? ? // 這三個是圖片
? ? import lv_dou_gao_home from "@/assets/lv_dou_gao_home.jpg"
? ? import mk_44 from "@/assets/mk_44.jpg"
? ? import cxk_1 from "@/assets/cxk_1.jpg"
? ? export default {
? ? ? ? name: "xxx",
? ? ? data() {
? ? ? ? return {
? ? ? ? ? imgList: [
? ? ? ? ? ? {
? ? ? ? ? ? ? imgURI: lv_dou_gao_home,
? ? ? ? ? ? ? commodityId: 40
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? imgURI: mk_44,
? ? ? ? ? ? ? commodityId: 16
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? imgURI: cxk_1,
? ? ? ? ? ? ? commodityId: 35
? ? ? ? ? ? },
? ? ? ? ? ],
? ? ? ? }
? ? ? }
? ? }
</script>
輪播圖 組件 代碼
<template>
? <div class="swiperBox" ref="swiperBox"? @mouseup="mouseup" @mousemove="mousemove" @mouseenter="mouseenter"? @mouseleave="mouseleave">
? ? <div style="position: relative;">
? ? ? <!-- 左側按鈕 -->
? ? ? <div class="arrow-l" @click="indexSub()"><</div>
? ? ? <!-- 右側按鈕 -->
? ? ? <div class="arrow-r" @click="indexAdd()">></div>
? ? ? <!-- 核心的滾動區(qū)域 -->
? ? ? <ul class="imgList" ref="imgList">
? ? ? ? <li v-for="item in imgList">
? ? ? ? ? <img :src="item.imgURI" ref="img" @mousedown="mousedown($event, item.commodityId)" >
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? <img :src="imgList[0].imgURI">
? ? ? ? </li>
? ? ? </ul>
? ? ? <!--下面的小圈圈-->
? ? ? <ul class="optionList">
? ? ? ? <li v-for="(item,index) in imgList">
? ? ? ? ? <div @click="indexOption=index" :class="{indexOption:show_indexOption==index}"></div>
? ? ? ? </li>
? ? ? </ul>
? ? </div>
? </div>
</template>
<script>
? ? export default {
? ? ? ? name: "swiper",
? ? ? props: ['imgList'],
? ? ? data(){
? ? ? ? ? return{
? ? ? ? ? ? flag_indexChange:true,
? ? ? ? ? ? indexOption:0,
? ? ? ? ? ? show_indexOption:0,
? ? ? ? ? ? flag_move:false,
? ? ? ? ? ? mousedown_clientX:0,
? ? ? ? ? ? img_commodityId:0,
? ? ? ? ? }
? ? ? },
? ? ? computed:{
? ? ? ? listLength(){
? ? ? ? ? return this.imgList.length;
? ? ? ? },
? ? ? ? imgWidth(){
? ? ? ? ? return this.$refs.swiperBox.offsetWidth;
? ? ? ? }
? ? ? },
? ? ? watch:{
? ? ? ? indexOption(val){
? ? ? ? ? this.show_indexOption = val;
? ? ? ? ? this.animate(val)
? ? ? ? }
? ? ? },
? ? ? mounted(){
? ? ? ? this.$refs.swiperBox.firstChild.style.width = this.imgWidth + "px";
? ? ? ? this.$refs.swiperBox.firstChild.style.height = this.$refs.swiperBox.offsetHeight + "px";
? ? ? ? this.$refs.imgList.style.width = (this.listLength +1) + "00%";
? ? ? ? var imgArray =? document.querySelectorAll('.imgList img');
? ? ? ? for (var i =0;i < (this.listLength +1);i++){
? ? ? ? ? imgArray[i].style.width = this.imgWidth + "px";
? ? ? ? ? imgArray[i].style.height = this.$refs.swiperBox.offsetHeight + "px";
? ? ? ? }
? ? ? ? this.set_swiperBox_timer();
? ? ? },
? ? ? methods:{
? ? ? ? set_swiperBox_timer(){
? ? ? ? ? clearInterval(this.$refs.swiperBox.timer);
? ? ? ? ? let tempThis = this;
? ? ? ? ? this.$refs.swiperBox.timer = setInterval(function() {
? ? ? ? ? ? tempThis.indexAdd();
? ? ? ? ? },2000);
? ? ? ? },
? ? ? ? animate(index, callback){
? ? ? ? ? let target = -index* this.imgWidth;
? ? ? ? ? let obj = this.$refs.imgList;
? ? ? ? ? let tempThis = this;
? ? ? ? ? // 先清除以前的定時器，只保留當前的一個定時器執(zhí)行
? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? obj.timer = setInterval(function() {
? ? ? ? ? ? // 步長值寫到定時器的里面
? ? ? ? ? ? // 把我們步長值改為整數(shù) 不要出現(xiàn)小數(shù)的問題
? ? ? ? ? ? var step = (target - obj.offsetLeft) / 10;
? ? ? ? ? ? step = step > 0 ? Math.ceil(step) : Math.floor(step);
? ? ? ? ? ? if (obj.offsetLeft == target) {
? ? ? ? ? ? ? // 停止動畫 本質是停止定時器
? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? tempThis.flag_indexChange = true;
? ? ? ? ? ? ? callback && callback(tempThis); //如果又回調函數(shù) 就執(zhí)行
? ? ? ? ? ? }
? ? ? ? ? ? // 把每次加1 這個步長值改為一個慢慢變小的值? 步長公式：(目標值 - 現(xiàn)在的位置) / 10
? ? ? ? ? ? obj.style.left = obj.offsetLeft + step + 'px';
? ? ? ? ? }, 15);
? ? ? ? },
? ? ? ? indexAdd(){
? ? ? ? ? if (this.flag_indexChange){
? ? ? ? ? ? this.flag_indexChange = false;
? ? ? ? ? ? var temp_index = this.indexOption+1;
? ? ? ? ? ? if (temp_index != this.listLength){
? ? ? ? ? ? ? this.indexOption =temp_index;
? ? ? ? ? ? }else {
? ? ? ? ? ? ? //先 show_indexOption = 0? ? 這樣 小圈圈 才和圖片同步刷新 （不信就注釋看看）
? ? ? ? ? ? ? this.show_indexOption = 0;
? ? ? ? ? ? ? this.animate(temp_index, function (tempThis) {
? ? ? ? ? ? ? ? tempThis.$refs.imgList.style.left = '0px';
? ? ? ? ? ? ? ? tempThis.indexOption =0;
? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? indexSub(){
? ? ? ? ? if (this.flag_indexChange){
? ? ? ? ? ? this.flag_indexChange = false;
? ? ? ? ? ? if (this.indexOption != 0){
? ? ? ? ? ? ? this.indexOption =this.indexOption - 1;
? ? ? ? ? ? }else {
? ? ? ? ? ? ? //看下面的mousemove函數(shù)? 拖拽圖片 松開鼠標 不用this.$refs.imgList.style.left = -(this.listLength * this.imgWidth) + 'px';
? ? ? ? ? ? ? if (false == this.flag_move){
? ? ? ? ? ? ? ? this.$refs.imgList.style.left = -(this.listLength * this.imgWidth) + 'px';
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? this.flag_move = false;
? ? ? ? ? ? ? }
? ? ? ? ? ? ? this.indexOption =this.listLength - 1;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? mousedown(event, commodityId){
? ? ? ? ? this.mousedown_clientX = event.clientX;
? ? ? ? ? this.img_commodityId = commodityId;
? ? ? ? ? event.preventDefault();
? ? ? ? },
? ? ? ? mouseup(event, commodityId){
? ? ? ? ? if (0 != this.mousedown_clientX){
? ? ? ? ? ? var difference =? this.mousedown_clientX - event.clientX ;
? ? ? ? ? ? this.mousedown_clientX = 0;
? ? ? ? ? ? //如果 差值為不為0? 鼠標按下 的x坐標 和 抬起的x坐標 不一樣
? ? ? ? ? ? //就是在拖拽圖片
? ? ? ? ? ? if ( 0 != difference) {
? ? ? ? ? ? ? difference > 0 ?? this.indexAdd() : this.indexSub();
? ? ? ? ? ? }else {
? ? ? ? ? ? ? //打開該圖片對應的商品頁面
? ? ? ? ? ? ? this.click_img();
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? mouseleave(event){
? ? ? ? ? if (0 != this.mousedown_clientX){
? ? ? ? ? ? var difference =? this.mousedown_clientX - event.clientX ;
? ? ? ? ? ? this.mousedown_clientX = 0;
? ? ? ? ? ? difference > 0 ?? this.indexAdd() : this.indexSub();
? ? ? ? ? }
? ? ? ? ? this.set_swiperBox_timer();
? ? ? ? },
? ? ? ? mouseenter(){
? ? ? ? ? // 操作過程不要定時器 干擾
? ? ? ? ? clearInterval(this.$refs.swiperBox.timer);
? ? ? ? },
? ? ? ? mousemove(event){
? ? ? ? ? if (0 != this.mousedown_clientX){
? ? ? ? ? ? var difference =? this.mousedown_clientX - event.clientX ;
? ? ? ? ? ? console.log(difference)
? ? ? ? ? ? if (0 < difference || 0!=this.indexOption){
? ? ? ? ? ? ? this.$refs.imgList.style.left = -(this.indexOption * this.imgWidth + difference )+ 'px';
? ? ? ? ? ? } else {
? ? ? ? ? ? ? this.$refs.imgList.style.left = -(this.listLength * this.imgWidth? + difference)+ 'px';
? ? ? ? ? ? ? this.flag_move = true;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? click_img(){
? ? ? ? ? const {href} = this.$router.resolve({
? ? ? ? ? ? name:'commodityPage',
? ? ? ? ? ? query:{
? ? ? ? ? ? ? commodityId:this.img_commodityId
? ? ? ? ? ? }
? ? ? ? ? });
? ? ? ? ? window.open(href,'_blank');
? ? ? ? }
? ? ? }
? ? }
</script>
<style scoped>
? .arrow-l, .arrow-r{
? ? cursor: pointer;
? ? display: none;
? ? position: absolute;
? ? top: 45%;
? ? width: 24px;
? ? height: 40px;
? ? background: rgba(0, 0, 0, .3);
? ? text-align: center;
? ? line-height: 40px;
? ? color: #fff;
? ? font-size: 18px;
? ? z-index: 2;
? }
? .arrow-r{
? ? right: 0px;
? }
? .swiperBox:hover .arrow-l, .swiperBox:hover .arrow-r{
? ? display: block;
? }
? .swiperBox{
? ? /*寫在 swiperBox 的div 里面了，這樣swiperBox 可以不relative*/
? ? /*position: relative;*/
? ? overflow: hidden;
? ? /*寫在調用方了*/
? ? /*top: -520px;*/
? ? /*left: 23%;*/
? ? /*width: 900px;*/
? ? /*height: 512px;*/
? }
? .imgList img{
? ? cursor: pointer;
? ? /*寫 mounted（）里面了*/
? ? /*width: 900px;*/
? ? /*height: 512px;*/
? }
? .imgList{
? ? padding: 0px;
? ? position: absolute;
? ? /*width: 9900%;*/? /*寫 mounted（）里面了*/
? ? list-style: none;
? }
? .imgList li{
? ? float: left;
? }
? .optionList{
? ? position: absolute;
? ? bottom: 15px;
? ? left: 50px;
? ? list-style: none;
? }
? .optionList li{
? ? float: left;
? ? z-index: 2;
? }
? .optionList li div{
? ? cursor: pointer;
? ? border-radius: 20px;
? ? border: 2px solid rgba(255, 255, 255, 0.5);
? ? margin: 0px 7px;
? ? width: 15px;
? ? height: 15px;
? ? transition:background 0.5s;
? ? -moz-transition:background 0.5s; /* Firefox 4 */
? ? -webkit-transition:background 0.5s; /* Safari and Chrome */
? ? -o-transition:background 0.5s; /* Opera */
? }
? .indexOption{
? ? background: white;
? }
</style>
如果對于學習編程有很多疑惑，沒有思路，不知道如何有效率的學習，可以添加我的前端交流學習群895757445，需要最新系統(tǒng)的學習教程也可以管我要。做了很多年開發(fā)，對于學習方式，如何提高自己的技術有一定的經(jīng)驗，術業(yè)有專攻，多跟有經(jīng)驗的人交流學習，對這個行業(yè)信息了解的多，職業(yè)發(fā)展的空間就越大
