zoukankan      html  css  js  c++  java
  • jquery手机端轮播图,点击放大手动轮播

    特点:手机端轮播图,点击放大,点击遮罩层恢复到原来的样子

      (不会自动轮播,华为机亲测有效)

    引用方法:

    1 引用
        <link rel="stylesheet" href="js/plugins/jquery.slide.css">   //引入CSS样式
    
    2 引用jQuery
        <script src="js/plugins/jquery.js"></script>             //引入jQuery
        <script src="js/plugins/jquery.slide.js"></script>       //引入轮播图插件
    
    3 调用
         $(function () {
                $('.slide').slide();
         })
    
    (可以直接看例子怎么引用)

    html代码:

    <head>
        <link rel="stylesheet" href="js/plugins/jquery.slide.css">   //引入CSS样式
        <script src="js/plugins/jquery.js"></script>             //引入jQuery
        <script src="js/plugins/jquery.slide.js"></script>       //引入轮播图插件
        <script>
            $(function () {
                $('.slide').slide();
            })
    
        </script>
    </head>
    <body>
    <!--引入结构,类名不要变-->
    <div class="slide">
        <ul>
            <li>
                <img src="images/1.jpg" alt="">
            </li>
            <li>
                <img src="images/2.jpg" alt="">
            </li>
            <li>
                <img src="images/3.jpg" alt="">
            </li>
            <li>
                <img src="images/4.jpg" alt="">
            </li>
            <li>
                <img src="images/5.jpg" alt="">
            </li>
        </ul>
        <!--左右箭头,箭头由CSS样式写的-->
        <a class="arrow-left" href="#"></a>
        <a class="arrow-right" href="#"></a>
    </div>
    </body>

    代码下载链接: https://github.com/Summer-Lin/slide

  • 相关阅读:
    SpringMvc与Struts2的对比
    Spring 通知
    Spring 之 AOP
    Spring 之 IOC
    Spring IOC 和 AOP概述
    JSON与JAVA数据的相互转换
    (4)-optXXX方法的使用
    (3)-JSONObject的过滤设置
    (2)-生成JSONObject的方法
    String 类型的相关转换
  • 原文地址:https://www.cnblogs.com/xiaoxiaossrs/p/7325254.html
Copyright © 2011-2022 走看看