• 移动端基于jquery的旋转木马插件


    1.引入插件jquery.carousel.js   (由于这个插件是基于jquery ,所以要先引入jquery.js)

    2.html代码如下

    <div class="caroursel poster-main" data-setting = '{
                        "scale":0.9, 
                        "algin":"left",
                        "speed":"3000",
                        "isAutoplay":"true",
                        "dealy":"3000"}'>
                        <ul class="poster-list">
                            <li data-id="1" class="poster-item">
                                <img src="../res_im/dong_img.png">
                            </li>
                            <li data-id="2" class="poster-item">
                                <img src="../res_im/xi_img.png">
                            </li>
                            <li data-id="3" class="poster-item">
                                <img src="../res_im/zhong_img.png">
                            </li>
                            <li data-id="4" class="poster-item">
                                <img src="../res_im/bei_img.png">
                            </li>
                            <li data-id="5" class="poster-item">
                                <img src="../res_im/nan_img.png">
                            </li>
                        </ul>
                        <div class="poster-btn poster-prev-btn"></div>
                        <div class="poster-btn poster-next-btn"></div>
                    </div>
    3,.引入carousel.css
    4.在js中初始化
    Caroursel.init($('.caroursel'))

  • 相关阅读:
    JSP页面中如何注入Spring容器中的bean
    struts2之Action与JSP相互数据传递
    IOS APP开发入门案例
    Android资源文件命名规范学习手册
    自定义控件之实现在线签名,保存,清除等功能实现
    SpringBoot+Mybatis+Maven+MySql小案例
    springBoot注解搜集
    SpringBoot打包war
    SpringBoot之返回json数据
    springboot之freemarker 和thymeleaf模板web开发
  • 原文地址:https://www.cnblogs.com/wx2019/p/11950350.html
Copyright © 2020-2023  润新知