html5 轮播图简单 html轮播图教程

转载

码农小哥 2023-11-02 19:14:05

文章标签 html5 轮播图简单轮播图分页 css 文章分类 HTML5 移动开发

最近在对公司官网改版2.0，之前的没有后台都是静态页面
那么官网逃不开的肯定是轮播图啦~
当然我一开始是自己写的，发现写到一半很麻烦，首先从最后一张像环路一样到第一张；其次不仅是点击，还要触摸滑动，这就要计算松开手的位置来判断是上一张、下一张还是原来的一张轮播图；最后过渡效果也生硬。索性就放弃了，直接使用插件了
附上链接，swiper的api可以看看，里面有一些配置可以设置一下
https://www.swiper.com.cn/api/index.html

我是后台请求得到的图片然后实现轮播
如果是写死的图片

1，html部分

<!-- 轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
                    <img :src="item" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

2，css部分

.container .swiper-container {
        width: 100%;
        height: 720px;
        position: relative;
    }

    .container .swiper-container img {
        width: 100%;
        height: 100%;
    }

    .container .swiper-container .swiper-pagination-custom {
        bottom: 32px;
        left: 0;
        width: 100%;
        height: 20px;
        /* background-color: red; */
        text-align: center;
    }

    /*自定义分页器的样式，这个你自己想要什么样子自己写*/
    .container .swiper-container .swiper-pagination-customs {
        width: 48px;
        height: 3px;
        display: inline-block;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 10px;
        /* box-shadow: 0 0 2px #000; */
        margin: 0 12px;
        outline: 0;
    }

    /*自定义分页器激活时的样式表现*/
    .container .swiper-container .swiper-pagination-customs-active {
        background-color: rgba(255, 255, 255, 1);
    }

    .container .swiper-container .swiper-button-next {
        width: 71px;
        height: 71px;
        background-image: url("../images/index_banner_arrow_right.png");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .container .swiper-container .swiper-button-prev {
        width: 71px;
        height: 71px;
        background-image: url("../images/index_banner_arrow_left.png");
        background-repeat: no-repeat;
        background-size: cover;
    }

3，js部分

要下载一下swiper.css和swiper.js和vue.js并引入（我这里用了vue，所以还要在最外层的标签给一个id选择器app)

<script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    bannerList: [], //轮播图的图片地址
                }
            },
        })
    </script>



<script>
var mySwiper = new Swiper('.swiper-container-pc', {
                                    autoplay: {
                                        delay: 5000,//轮播的定时
                                        disableOnInteraction: false,
                                    },
                                    loop: true, // 循环模式选项
                                    speed: 1000, // 循环模式选项
                                    // 如果需要分页器
                                    pagination: {
                                        el: '.swiper-pagination',
                                        type: 'custom',//设置自定义分页器样式
                                        autoplayDisableOnInteraction: false,
                                        renderCustom: function (swiper, current,
                                            total) {
                                            var paginationHtml = " ";
                                            for (var i = 0; i < total; i++) {
                                                // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                                                if (i === (current - 1)) {
                                                    paginationHtml +=
                                                        '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                                                } else {
                                                    paginationHtml +=
                                                        '<span class="swiper-pagination-customs"></span>';
                                                }
                                            }
                                            return paginationHtml;
                                        },
                                    },
                                    // 如果需要前进后退按钮
                                    navigation: {
                                        nextEl: '.swiper-button-next',
                                        prevEl: '.swiper-button-prev',
                                    },
                                })


</script>

如果没有后台交互就已经能实现了
下面是怎么交互实现轮播的，html和css一样，没改动
js部分，在vue部分写交互逻辑并调用

到这里，你会发现图片成功渲染了，但是轮播图不实现轮播了

methods: {
                //获取轮播图
                getBannerList() {
                    $.ajax({
                        type: 'GET',
                        url: 'http://192.168.2.4:8082/api/banner/query',
                        data: {
                            moduleType: 1,
                            platformValue: 1
                        },
                        dataType: 'json',
                        success: (reponse) => {
                            this.bannerList = reponse.data.list[0].imageList
                        },
                        error: function (xhr, type) {
                            // alert('加载出错!');
                            console.log(xhr, type);
                        }
                    });
                },
                
            },
            created() {
                this.getBannerList()
            
            },

解决方案就是调用成功后去new swiper，就能正常实现轮播啦

methods: {
                //获取轮播图
                getBannerList() {
                    $.ajax({
                        type: 'GET',
                        url: 'http://192.168.2.4:8082/api/banner/query',
                        data: {
                            moduleType: 1,
                            platformValue: 1
                        },
                        dataType: 'json',
                        success: (reponse) => {
                            this.bannerList = reponse.data.list[0].imageList

                            this.$nextTick(() => {
                                var mySwiper = new Swiper('.swiper-container-pc', {
                                    autoplay: {
                                        delay: 5000,
                                        disableOnInteraction: false,
                                    },
                                    loop: true, // 循环模式选项
                                    speed: 1000, // 循环模式选项
                                    // 如果需要分页器
                                    pagination: {
                                        el: '.swiper-pagination',
                                        type: 'custom',
                                        autoplayDisableOnInteraction: false,
                                        renderCustom: function (swiper, current,
                                            total) {
                                            var paginationHtml = " ";
                                            for (var i = 0; i < total; i++) {
                                                // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                                                if (i === (current - 1)) {
                                                    paginationHtml +=
                                                        '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
                                                } else {
                                                    paginationHtml +=
                                                        '<span class="swiper-pagination-customs"></span>';
                                                }
                                            }
                                            return paginationHtml;
                                        },
                                    },
                                    // 如果需要前进后退按钮
                                    navigation: {
                                        nextEl: '.swiper-button-next',
                                        prevEl: '.swiper-button-prev',
                                    },
                                })
                            })

                        },
                        error: function (xhr, type) {
                            // alert('加载出错!');
                            console.log(xhr, type);
                        }
                    });
                },
               
            },

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。