HTML--简单的轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        .img-big{
            width: 400px;
            height: 300px;
            border: 4px solid rgb(60, 102, 156);
            margin: 0 auto;
        }
        .img-sim{
            width: 400px;
            height: 300px;
            display: none;
        }
        .img-block{
            display: block;
        }
    </style>
</head>
<body>
    <div class="img-big">
        <img src="img/img01.webp" alt="1" class="img-sim img-block">
        <img src="img/img02.webp" alt="2" class="img-sim">
        <img src="img/img03.webp" alt="3" class="img-sim">
    </div>
</body>
<script>
    var index = 0;
    // 定时器
    setInterval(function(){
        index++;
        var small_img = document.getElementsByClassName('img-sim')
        //判断index值是否过多
        if (index >= small_img.length) index = 0
        //循环遍历每个图片 使其隐藏
        for (const n of small_img) {
            n.style.display = 'none'
        }
        //给index位置上的图片 使其显示
        small_img[index].style.display = 'block'
        //时间
    },1000)
</script>
</html>

Vue-awesome-swiper是一个用于Vue.js的强大轮播图插件。它基于Swiper.js库,并提供了易于使用和高度可定制的组件来创建各种类型的轮播图。 要使用vue-awesome-swiper,您需要首先安装它。您可以在终端中运行以下命令来安装: ``` npm install vue-awesome-swiper --save ``` 安装完成后,在您的Vue组件中引入并注册vue-awesome-swiper。例如: ```javascript import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // import样式 import 'swiper/css/swiper.css' // 在Vue中使用插件 Vue.use(VueAwesomeSwiper /* { default options with global component } */) ``` 现在,您可以在您的Vue模板中使用vue-awesome-swiper组件来创建轮播图了。以下是一个简单的例子: ```html <template> <div> <swiper :options="swiperOptions"> <swiper-slide v-for="(item, index) in items" :key="index"> <img :src="item.imageUrl" alt="Slide Image"> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> </template> <script> export default { data() { return { items: [ { imageUrl: 'path/to/image1.jpg' }, { imageUrl: 'path/to/image2.jpg' }, { imageUrl: 'path/to/image3.jpg' } ], swiperOptions: { // Swiper.js的选项 // 例如:autoplay: true } } } } </script> ``` 在上面的例子中,我们使用`<swiper>`标签来包裹轮播图的内容,并使用`<swiper-slide>`标签来定义每个轮播项。您可以根据自己的需求添加其他选项,如分页器、前进/后退按钮等。 这只是一个简单的示例,您可以根据自己的需求进行更多的定制和样式调整。您可以查阅vue-awesome-swiper的文档以获得更多详细信息和示例代码。祝您成功使用vue-awesome-swiper创建漂亮的轮播图
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值