【JS+Vue】轮播图实现

最新推荐文章于 2024-07-17 14:33:27 发布

半个头像的女同学

最新推荐文章于 2024-07-17 14:33:27 发布

阅读量268

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/jycml/article/details/104757616

版权

一、原生JS实现

效果
放上我最喜欢的邓紫琪，写代码都有动力了！
代码

2.1 html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loopImg</title>
    <link href="css/loopImg.css" type="text/css" rel="stylesheet">
    <script src="js/loopImg.js"></script>
</head>
<body>
    <div id="outter">
<!--        图片-->
        <ul id="imgList">
            <li><img src="img/111.jpg"></li>
            <li><img src="img/222.jpg"></li>
            <li><img src="img/333.jpg"></li>
            <li><img src="img/444.jpg"></li>
        </ul>

<!--        圆点列表-->
		<div id="navdiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>

    </div>
</body>
</html>

2.2 CSS代码

*{
    margin: 0;
    padding: 0;
}
/*设置外部div*/
#outter{
    width: 600px;
    height: 400px;
    margin: 10px auto;
    padding: 10px 0;
    border: brown 1px solid;
    background-color: lightpink;
    /*父元素相对定位*/
    position: relative;
    /*裁剪溢出元素*/
    overflow: hidden;
}
/*设置 UL*/
#imgList{
    list-style: none; /*去除小圆点*/
    position: absolute; /*开启绝对定位*/
    left: 0px; /*设置偏移量，每向左移动600px就会显示下一张图片*/
}
/*设置图片中的 li*/
#imgList li{
    float: left;/*图片向左移动*/
    margin: auto 10px;
}
#imgList li img{
    width: 580px;
    height: 380px;
}
/*设置导航按钮*/
#navdiv{
    position: absolute; /*开启绝对定位*/
    bottom: 10px;  /*确定位置*/
}
#navdiv a{
    width: 15px;
    height: 15px;
    float: left;
    background-color: darkgrey;
    margin: 0 5px;  /*设置左右外边距*/
    opacity: 0.5; /*设置透明度*/
    border-radius: 10px;
}
/*设置鼠标移入效果*/
#navdiv a:hover{
    background-color: azure;
}

2.3 JS代码

window.onload = function () {
    loopImg();
}
function loopImg() {
//    获取所有的元素
    var outter = document.getElementById("outter");
    var imgList = document.getElementById("imgList");
    var imgArr = document.getElementsByTagName("img");
    var navdiv = document.getElementById("navdiv");
    var aArr = document.getElementsByTagName("a");

    var index = 0; //显示图片的索引
    
    // 设置imgList的宽度
    imgList.style.cssText = "width:"+600*imgArr.length+"px";
    // imgList.style.width = 600*imgArr.length+"px"; //另一种写法
    // 设置一排小圆点居中
    navdiv.style.left = (outter.offsetWidth-navdiv.offsetWidth)/2+"px";
     // 设置默认选中的效果
    aArr[index].style.backgroundColor = "azure";


//    自动加载图片
    autoChange(imgList,aArr,index);
    
//    为圆点添加点击事件
    for(var i=0; i<aArr.length; i++){
        // 为每一个a添加一个属性
        aArr[i].num = i;
        aArr[i].onclick = function () {
            // 清除定时器
            clearInterval(timer);
            index = this.num;  //不能直接用i，因为i此时已经等于5了
            // 切换图片
            changeImg(imgList,index);
            // 切换圆点
            changeA(aArr,index);
            // 再自动切换
            autoChange(imgList,aArr,index)
        }
    }
}

//自动轮播
function autoChange(imgList,aArr,index) {
    timer = setInterval(function () {
        index++;
        console.log(index);
        index = index%aArr.length;  //取余，确保0-3    
                // 切换显示的图片
        changeImg(imgList,index);
        // 切换圆点A
        changeA(aArr,index);
    },2000)
}

//切换图片
function changeImg(imgList,index) {
    imgList.style.left = -index*600+"px";
}

//切换圆点 A
function changeA(aArr,index) {
    // 切换显示的圆点
    for(var i=0; i<aArr.length; i++){
        if(i==index){
            aArr[i].style.backgroundColor = "azure";
            }else{
            aArr[i].style.backgroundColor = "darkgrey";
        }
    }
}

二、Vue实现（使用swiper工具）
1. swiper的js文件下载：
链接：https://pan.baidu.com/s/1oe0nYR7I14M-fhh1d-2-iQ
提取码：u8o6
swiper使用官网：https://3.swiper.com.cn/
2. 标签部分

<div class="banner-wrap">
            <div class="swiper-container" ref="swiper-container">
                <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in swipers" :key="index"><img :src="item.image" alt="图片1"></div>
                </div>
                <div class="swiper-pagination" ref="swiper-pagination"></div>
            </div>
        </div>

在mounted() 里设置滑动参数

mounted(){
            var mySwiper = new Swiper(this.$refs['swiper-container'], {
                autoplay: 3000,//可选选项，自动滑动
                pagination : this.$refs['swiper-pagination'],
                paginationClickable :true,
                autoplayDisableOnInteraction : false,
            })
        }