mui 轮播

 

 

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
          mui.init();
    </script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">hello</h1>
</header>
    <!--需要轮播可轮训滑动的话 必须加上class="mui-slider-item-duplicate"  并且还要把最后一个轮播图多复制出来一条放到第一个上，再把第一个轮播图复制出来放到最后-->
<div class="mui-content">
    <div class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#"><div style="height: 10px;margin-top: 11px;">3</div><img src="imgs/banner1.png"/></a>
            </div>
            <div class="mui-slider-item">
                <a href="#"><div style="height: 7px; margin-top: 11px;">1</div><img src="imgs/banner1.png"/></a>
            </div>
            <div class="mui-slider-item">
                <a href="#"><div style="height: 7px;margin-top: 11px;">2</div><img src="imgs/banner1.png"/></a>
            </div>
            <div class="mui-slider-item">
                <a href="#"><div style="height: 10px;margin-top: 11px;">3</div><img src="imgs/banner1.png"/></a>
            </div>
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#"><div style="height: 7px; margin-top: 11px;">1</div><img src="imgs/banner1.png"/></a>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
        </div>
    </div>
    <button type="button" onClick="changeTo(2)">切换到3个项目</button>
</div>
</body>
<script type="text/javascript">
    /*mui.plusReady(function(){}) 加上此方法只会在真机上有效果*/
        //获取slider 插件对象
        var gellery = mui('.mui-slider');
            gellery.slider({
                interval: 5000//自动轮播周期，若为0则不自动播放，默认为0；
            })
    //切换到第几个项目
    function changeTo(index){
        var slider = mui('.mui-slider');
            slider.slider().gotoItem(index);
    }
</script>
    
    
</html>
复制代码

 

posted @   遇事稳坐钓鱼台  阅读(328)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手