js轮播图代码

js轮播图代码

因为平时用vue，写代码习惯了，这个轮播图的代码是在vue的脚手架里写的，把它拆解起来，写在html原理一样，基本功能实现了，唯一美中不足的就是轮播图一开始不是自动播放的，需要鼠标在图片上划过一次才能自动播放，如果用原生js代码写的话，用windoes.onload和init，建立定时器，然后清除等操作可以实现自动播放，和鼠标放在上面后停止播放功能，遇到的问题就是，vue加载页面自动开始触发的定时器写在mounted中，但是将定时器销毁，只能写在钩子函数befdestroy和destroy中才能销毁（我感觉是）中间需要鼠标放在图片上停止定时器实现不了，对vue的生命周期函数理解的还是不够，以后还得多多练习。
代码

<template>
  <div>
    <div class='container' @mouseover = 'onStyle()' @mouseout="outStyle()">
        <div class="fade pics">
            <div class='number'>1/3</div>
            <img src="../assets/1.jpg" style="height:100%; width:100%;">
            <a href='#' class='text'>我是第1张照片</a>
        </div>
        <div class="fade pics">
            <div class='number'>2/3</div>
            <img src="../assets/2.jpg" style="width:100%;">
            <a href='#' class='text'>我是第2张照片</a>
        </div>
        <div class="fade pics">
            <div class='number'>3/3</div>
            <img src="../assets/3.jpg" style="width:100%;">
            <a href='#' class='text'>我是第3张照片</a>
        </div>
        <a class='pre' @click="showpic(-1)">❮</a>
        <a class='next' @click="showpic(1)">❯</a>
        <div class="dots">
           <span class='dot' @click="nowshowpic(1)"></span>
           <span class='dot' @click="nowshowpic(2)"></span>
           <span class='dot' @click="nowshowpic(3)"></span>
        </div>
     </div>
</div>
</template>
<script>
export default {
    name:"lunbopluse",
    data(){
        return{
            picsIndex:1,
            timer:""
        }
    },
    methods: {
    onStyle(){
       clearInterval(this.timer);
       document.getElementsByClassName('text').style.left = '40%';
       
     },
    outStyle(){
      this.timer =  setInterval(() => {this.showpic(1);},2000);
    },
    nowshowpic(n){
      this.pic(this.picsIndex = n)
    },
    showpic(n){
      this.nowshowpic(this.picsIndex + n)
    },
    pic(){
        let pics = document.getElementsByClassName('pics');
        let dots = document.getElementsByClassName('dot');
        if(this.picsIndex > pics.length){
            this.picsIndex = 1;
        };
        if(this.picsIndex < 1){
            this.picsIndex = pics.length;
        };
        for(let i=0;i<pics.length;i++){
            pics[i].style.display = "none"; 
        };
        for(let i=0;i<dots.length;i++){
            dots[i].className = dots[i].className.replace("active","");//这个代码的replace
        };
            pics[this.picsIndex - 1].style.display = "block";
            dots[this.picsIndex - 1].className += " active";//必须和这个一块用才行
        }
    },
    mounted(){
        this.nowshowpic(1);
    },
    beforedestroyed(){
        clearInterval(this.timer);
    }
};
</script>
<style scoped>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
 .container{
     position: relative;
     height: 242px;
     width: 680px;
     margin: 0 auto;
 }
 .pics{
    position: absolute;
    display: none;
 }
 img:hover{  
        transform: scale(1.2);
         }
 .number{
    position:absolute;
    top: 10px;
    left: 10px;
    margin-left: 10px;
    margin-top: 10px;  
    color: white;     
 }
 .text{
     position:absolute;
     bottom: 10px;
     left: 20%;
     font-size: 30px;
     text-decoration:none;
 }
 .pre, .next{
     cursor: url;
     position:absolute;
     font-size: 50px;
     color:red;
     z-index:10;
     transition: color 1s;
 }
 .pre{
     bottom: 40%;
     left: 20px;
 }
 .next {
    bottom: 40%;
    right: 20px;
 }
.next:hover, .pre:hover{
      color: orange;
}
 .dots{
     position:absolute;
     bottom: 10px;
     left: 10px;
 }
 .dot{
    cursor:pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: blue;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 1s;
 }
 .active, .dot:hover{
     background-color:red;
    
 }
 .fade {
			  animation-name: fade;
			  animation-duration: 1.5s;
			}
 @keyframes fade {
			  from {opacity: .4} 
			  to {opacity: 1}
			}
</style>

更多前端资料

请微信关注公众号：前端从入门到SP
微信扫描