小说APP源码，手动滑动轮播图时，轮播图跟随移动

小说APP源码，手动滑动轮播图时，轮播图跟随移动实现的相关代码

html结构

<br><template><br>  <div @mouseleave="enterFn" @mouseenter="leaveFn"><br>    <ul><br>      <li class="carousel-item " :class="{ fade: indexid === index }" v-for="(item, index) in list" :key="item.id"><br>        <RouterLink to="/"><br>          <img :src="item.imgUrl" alt="" /><br>        </RouterLink><br>      </li><br>    </ul><br>    <a href="javascript:;" class="carousel-btn prev" @click="lastPage"><i class="iconfont icon-angle-left"></i></a><br>    <a href="javascript:;" class="carousel-btn next" @click="nextPage"><i class="iconfont icon-angle-right"></i></a><br>    <div><br>      <span @click="indexid = i - 1" v-for="i in list.length" :key="i" :class="{ active: indexid === i - 1 }"></span><br>    </div><br>  </div><br></template>

js语法

<br><script><br>import { ref, watch, onUnmounted } from 'vue'<br>export default {<br>  name: 'Carousel',<br>  props: {<br>    // 图片数据<br>    list: {<br>      type: Object,<br>      default: () => {}<br>    },<br>    // 轮播图每张切换的事件<br>    duration: {<br>      type: Number,<br>      default: 2<br>    },<br>    // 是否开启轮播图<br>    autoplay: {<br>      type: Boolean,<br>      default: true<br>    },<br>    // 点击翻几张<br>    page: {<br>      type: Number,<br>      default: 1<br>    }<br>  },<br>  setup(props) {<br>    // 索引<br>    const indexid = ref(0)<br>    // 轮播<br>    const timer = ref(null)<br>    const TimeFn = () => {<br>      clearInterval(timer)<br>      // 每次执行前都清除上一次的定时器<br>      timer.value = setInterval(() => {<br>        indexid.value++<br>        // 如果超出界限就重新回填<br>        if (indexid.value > props.list.length - 1) {<br>          indexid.value = 0<br>        }<br>      }, props.duration * 1000)<br>    }<br>    // 点击+下一站图片<br>    const nextPage = () => {<br>      indexid.value += props.page<br>      if (indexid.value > props.list.length - 1) {<br>        indexid.value = 0<br>      }<br>    }<br>    // 点击+上一张图片<br>    const lastPage = () => {<br>      indexid.value -= props.page<br>      if (indexid.value < 0) {<br>        indexid.value = props.list.length - 1<br>      }<br>    }<br>    // 清除定时器<br>    const leaveFn = () => {<br>      // console.log('清除定时器')<br>      clearInterval(timer.value)<br>      // console.log(timer)<br>    }<br>    // 组件消耗，清理定时器<br>    onUnmounted(() => {<br>      clearInterval(timer.value)<br>    })<br>    // 开启定时器<br>    const enterFn = () => {<br>      if (props.list.length > 1 && props.autoplay) {<br>        // console.log('开启定时器')<br>        TimeFn()<br>      }<br>    }<br>    watch(<br>      () => props.list,<br>      () => {<br>        if (props.list.length > 1 && props.autoplay) {<br>          TimeFn()<br>        }<br>      }<br>    )<br>    return { indexid, leaveFn, enterFn, nextPage, lastPage }<br>  }<br>}<br></script>

css样式

<br><style scoped><br>.xtx-carousel {<br>  width: 100%;<br>  height: 100%;<br>  min-width: 300px;<br>  min-height: 150px;<br>  position: relative;<br>  .carousel {<br>    &-body {<br>      width: 100%;<br>      height: 100%;<br>    }<br>    &-item {<br>      width: 100%;<br>      height: 100%;<br>      position: absolute;<br>      left: 0;<br>      top: 0;<br>      opacity: 0;<br>      transition: opacity 0.5s linear;<br>      &.fade {<br>        opacity: 1;<br>        z-index: 1;<br>      }<br>      img {<br>        width: 100%;<br>        height: 100%;<br>      }<br>    }<br>    &-indicator {<br>      position: absolute;<br>      left: 0;<br>      bottom: 20px;<br>      z-index: 2;<br>      width: 100%;<br>      text-align: center;<br>      span {<br>        display: inline-block;<br>        width: 12px;<br>        height: 12px;<br>        background: rgba(0, 0, 0, 0.2);<br>        border-radius: 50%;<br>        cursor: pointer;<br>        ~ span {<br>          margin-left: 12px;<br>        }<br>        &.active {<br>          background: #fff;<br>        }<br>      }<br>    }<br>    &-btn {<br>      width: 44px;<br>      height: 44px;<br>      background: rgba(0, 0, 0, 0.2);<br>      color: #fff;<br>      border-radius: 50%;<br>      position: absolute;<br>      top: 228px;<br>      z-index: 2;<br>      text-align: center;<br>      line-height: 44px;<br>      opacity: 0;<br>      transition: all 0.5s;<br>      &.prev {<br>        left: 20px;<br>      }<br>      &.next {<br>        right: 20px;<br>      }<br>    }<br>  }<br>  &:hover {<br>    .carousel-btn {<br>      opacity: 1;<br>    }<br>  }<br>}<br></style>