之前在博客园上看了许多优秀的博客,学到很多东西,最近刚刚开通自己的博客,希望能和大家互相交流,
互相学习。
今天我给大家介绍一款非常绚丽和灵活,有多种皮肤的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/