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

 

 

 

 

 

 

 

 

posted on 2012-03-21 12:54  杭州湛亚技术支持  阅读(653)  评论(0编辑  收藏  举报