zoukankan      html  css  js  c++  java
  • 介绍一种灵活并且绚丽的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/

  • 相关阅读:
    Java基础知识强化102:线程间共享数据
    Java(Android)编程思想笔记02:组合与继承、final、策略设计模式与适配器模式、内部类、序列化控制(注意事项)
    Android开发经验01:31个Android开发实战经验
    TCP/IP协议原理与应用笔记19:IP分组的交付和路由选择
    Android 高级UI设计笔记08:Android开发者常用的7款Android UI组件(转载)
    Java(Android)编程思想笔记01:多态性的理解
    Java基础知识强化之集合框架笔记75:哈希表
    重置 linux系统后要配置的基本组件操作
    记一个空格导致的三小时排查
    windows无法启动redis服务,错误码1067
  • 原文地址:https://www.cnblogs.com/ylgbd/p/2409641.html
Copyright © 2011-2022 走看看