MUI 混合开发 轮播图应用

MUI 混合开发 轮播图应用

在MUI api中轮播代码

"slider" class="mui-slider" > //轮播盒子 <div class="mui-slider-group mui-slider-loop"> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="http://placehold.it/400x300"> a> div> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> a> div> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> a> div> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> a> div> <div class="mui-slider-item"> <a href="#"> <img src="http://placehold.it/400x300"> a> div> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="http://placehold.it/400x300"> 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 class="mui-indicator">div> div> div>
上面的代码可以看出在mui中无缝循环轮播的机制是第一张图片前是周后一张图片,最后一张图片后是第一张图片,下面说下关于ajax获取img url动态添加到dom中的处理。

ajax与mui轮播图结合

html部分代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script src="js/mui.min.js">script>
        <link href="css/mui.min.css" rel="stylesheet"/>
        <style>
            #banner{
                height: 200px;
                width: 100%;
            }
        style>
    head>
    <body>
        
        <div id="slider" class="mui-slider" >

        div>
    body>
html>

JavaScript部分代码


                    
                    

你可能感兴趣的:(常用框架)