Swiper之onClick触发自定义的url

最新推荐文章于 2024-09-02 14:59:55 发布

dataee

最新推荐文章于 2024-09-02 14:59:55 发布

阅读量2.3k

点赞数

分类专栏： J2ee 文章标签： javascript ViewUI

J2ee 专栏收录该内容

73 篇文章

订阅专栏

本文介绍如何使用Swiper轮播图组件触发点击事件，并通过设置自定义属性实现页面跳转。具体实现中，为每个轮播项添加了url-val属性，并在Swiper的onClick事件中读取此属性值来完成跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

Swiper轮番图触发onClick事件，然后触发Slide自定义的url或者获取其属性

实现：

<div class="swiper-container">
    <ul class="swiper-wrapper">
        <li class="swiper-slide" url-val="${basePath}/cms/article/list">
            <img src="${basePath}static/common/images/home_img.jpg" alt="" />
        </li>
        <li class="swiper-slide" url-val="${basePath}">
            <img src="${basePath}static/common/images/home_img_index.jpg" alt="" />
        </li>
        <li class="swiper-slide" url-val="${basePath}/itemTm/list">
            <img src="${basePath}static/common/images/home_img_tmh.jpg" alt="" />
        </li>
        <li class="swiper-slide" url-val="${basePath}/cms/article/list">
            <img src="${basePath}static/common/images/home_img.jpg" alt="" />
        </li>
    </ul>
    <div class="swiper-pagination">
    </div>
</div>

对应的js操作：

<script type="text/javascript">
    (function($) {
        var swiper = new Swiper('#home_page .swiper-container', {
            autoplay: 3000,
            pagination: '#home_page .swiper-pagination',
            loop: true,
            onClick: function(swiper) {
                window.location.href = swiper.clickedSlide.attributes["url-val"].nodeValue;
            }
        });

    })(jQuery)
</script>

更多优质资源请访问http://www.someabcd.com