• 介绍一种灵活并且绚丽的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/

  • 相关阅读:
    springboot调优
    韩立刚计算机网络笔记-第08章 传输层
    韩立刚计算机网络笔记-第07章 网络层协议
    韩立刚计算机网络笔记-第06章 动态路由和静态路由
    韩立刚计算机网络笔记-第05章 IP地址和子网划分
    韩立刚计算机网络笔记-第04章 数据链路层
    韩立刚计算机网络笔记-第03章 GNS网络模拟器
    韩立刚计算机网络笔记-第02章 物理层
    韩立刚计算机网络笔记-第01章 计算机网络详解
    算法很美 笔记 12.图结构
  • 原文地址:https://www.cnblogs.com/ylgbd/p/2409641.html
Copyright © 2020-2023  润新知