<!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>
<title>Easy Slider jQuery Plugin Demo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
$("#slider2").easySlider({
controlsBefore: '<p id="controls2">',
controlsAfter: '</p>',
prevId: 'prevBtn2',
nextId: 'nextBtn2'
});
});
</script>
<style type="text/css">
body {
background:#fff url(images/bg_body.gif) repeat-x;
font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
color:#333;
line-height:180%;
margin:0;
padding:0;
text-align:center;
}
h1{
font-size:180%;
font-weight:normal;
margin:0;
padding:20px;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:674px;
}
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:2em;
}
#header{
height:80px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
}
/* Easy Slider */
#slider{}
#slider ul, #slider li, #slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
#slider2 li{
background:#f1f1f1;
}
#slider2 li h2{
margin:0 20px;
padding-top:20px;
}
#slider2 li p{
margin:20px;
}
p#controls, p#controls2{
margin:0;
position:relative;
}
#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{
display:block;
margin:0;
overflow:hidden;
text-indent:-8000px;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:-160px;
}
#nextBtn, #nextBtn2{
left:696px;
}
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{
display:block;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #nextBtn2 a{
background:url(images/btn_next.gif) no-repeat 0 0;
}
/* // Easy Slider */
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Easy Slider jQuery Plugin Demo - styled version</h1>
</div>
<div id="content">
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
<div id="slider2">
<ul>
<li>
<h2>What's Templatica anyway?</h2>
<p>Templatica is a membership based template club where you get
<strong>full access to all templates</strong> in the <a href="http://templatica.com/templates">css template gallery</a> for a single and very affordable
<strong>annual fee of $24!</strong><br />
Yup, that's right! All of <a href="http://templatica.com/templates" title="CSS templates">this</a> plus <strong>all of the
templates released within one year from the day you join</strong>. No extra cost, no hidden fees!<br />
You also have a possibility of purchasing a <strong>single template for as low as $5</strong>.</p>
</li>
<li>
<h2>Why is the fee so low?</h2>
<p>I wanted to make premium templates <strong>available to as many of you as possible</strong>.
<a href="http://templatica.com/templates">Templates</a> are not only meant for commercial but for
<strong>educational purpose as well</strong>. I would like you to <a href="http://templatica.com/join">join</a>,
download templates, analyze the code and hopefully learn something new. <br/>
For those who'd like to <strong>test the quality</strong> of the templates I suggest my <strong>single template purchase option</strong>.</p>
</li>
<li>
<h2>What Templatica offers</h2>
<p>Templatica offers static design templates with <strong>valid XHTML and CSS</strong>.
All templates are tested in<strong> Firefox Win, IE7, IE6, Opera</strong> on Windows
as well as <strong>Safari and Firefox</strong> on Mac. <br />
Templates are <strong>highly customizable</strong>. The download package for each template
includes HTML, CSS, JavaScript files and related images.</p>
</li>
</ul>
</div>
<h3>Usage</h3>
<pre>$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
$("#slider2").easySlider({
controlsBefore: '<p id="controls2">',
controlsAfter: '</p>',
prevId: 'prevBtn2',
nextId: 'nextBtn2'
});
}); </pre>
<h3>CSS</h3>
<pre>#slider{}
#slider ul, #slider li, #slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
p#controls, p#controls2{
margin:0;
position:relative;
}
#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{
display:block;
margin:0;
overflow:hidden;
text-indent:-8000px;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:-160px;
}
#nextBtn, #nextBtn2{
left:696px;
}
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{
display:block;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #nextBtn2 a{
background:url(images/btn_next.gif) no-repeat 0 0;
} </pre>
<p><a href="http://cssglobe.com/post/4004/jquery-plugin-easy-image-or-content-slider" title="read more about this jquery plugin">back to the article</a></p>
<p><strong>Easy Slider</strong> jQuery Plugin is brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a> and supported by <a href="http://templatica.com">Css Templates</a> by Templatica</p>
</div>
</div>
</body>
</html>
jQuery EasySlider v1.5 图片滚动切换插件.zip （17个子文件） 
132686961418704626 css 
screen.css 4KB images 
01.jpg 32KB 05.jpg 36KB
bg_header.gif 479B 04.jpg 39KB btn_prev.gif 2KB 03.jpg 32KB 02.jpg 43KB btn_next.gif 2KB bg_body.gif 532B js jquery.js 53KB easySlider1.5.js 4KB
04.html 4KB 01.html 3KB 03.html 3KB 02.html 4KB 05.html 7KB资源评论
