• 介绍一种灵活并且绚丽的jquey插件AnythingSlider 图片相册插件


        之前在博客园上看了许多优秀的博客,学到很多东西,最近刚刚开通自己的博客,希望能和大家互相交流,

    互相学习。

       今天我给大家介绍一款非常绚丽和灵活,有多种皮肤的Jquery 插件—AnythingSlider 图片相册插件

    先给大家看看效果图.

       

      这个jquery 插件 还有许多皮肤和效果,这里就不一一贴出来了,下面我贴下具体代码。

      前台代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://www.cnblogs.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <%--logo小图标--%>
        <link rel="shortcut icon" href="http://www.cnblogs.com/JS/ProLoser-AnythingSlider-f9fc3b3/demos/images/favicon.ico"/>
        <link rel="apple-touch-icon" href="http://www.cnblogs.com/JS/ProLoser-AnythingSlider-f9fc3b3/demos/images/apple-touch-icon.png"/>
        <style type="text/css" >
        #slider { 700px; height: 390px; }
        </style>
        <link href="http://www.cnblogs.com/JS/ProLoser-AnythingSlider-f9fc3b3/demos/css/page.css" rel="stylesheet"
            type="text/css" />
        <!-- Anything Slider -->
        <link href="http://www.cnblogs.com/JS/ProLoser-AnythingSlider-f9fc3b3/css/anythingslider.css" rel="stylesheet"
            type="text/css" />
        <script src="http://www.cnblogs.com/JS/ProLoser-AnythingSlider-f9fc3b3/js/jquery.anythingslider.js"
            type="text/javascript"></script>
        <script type="text/javascript">
            // DOM Ready
            $(function () {
                $('#slider').anythingSlider();
            });
        </script>
    </head>
    <body id="simple">
        <div>
            <ul id="slider">

            <li><img src="http://www.cnblogs.com/JS/ProLoser-AnythingSlider-f9fc3b3/demos/images/slide-civil-1.jpg" alt="" /></li>

            <li><img src="http://www.cnblogs.com/JS/ProLoser-AnythingSlider-f9fc3b3/demos/images/slide-civil-2.jpg" alt="" /></li>

            <li><img src="http://www.cnblogs.com/JS/ProLoser-AnythingSlider-f9fc3b3/demos/images/slide-env-1.jpg" alt="" /></li>

            <li><img src="http://www.cnblogs.com/JS/ProLoser-AnythingSlider-f9fc3b3/demos/images/slide-env-2.jpg" alt="" /></li>

        </ul>
        </div>
    </body>
    </html>

    大家看到前台代码,其实就是调用了anythingSlider()这个方法。

    对,就是这么简单。

       下载地址:http://css-tricks.com/anythingslider-jquery-plugin/

  • 相关阅读:
    静态代理模式
    当对象或属性为空时,如何安全的给默认值
    linux抓取日志
    BigDecimal进行比较
    int与Double类型转换
    通过配置文件的key得值
    ObjectNode ArrayNode JsonNode
    java.lang.NoSuchFieldError报错解决方案
    BigDecimal.setScale 处理java小数点
    Jmeter实现压力测试(多并发测试)
  • 原文地址:https://www.cnblogs.com/ylgbd/p/2409641.html
Copyright © 2020-2023  润新知