jQuery图片代码、带左右箭头图片滑动特效代码

1. 引入JS

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/easySlider1.5.js”></script>

2. HTML代码

<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://cxvn.com/pview/30″><img src=”images/01.jpg” alt=”Css Template Preview” /></a></li>
<li><a href=”http://cxvn.com/pview/7″><img src=”images/02.jpg” alt=”Css Template Preview” /></a></li>
<li><a href=”http://cxvn.com/pview/25″><img src=”images/03.jpg” alt=”Css Template Preview” /></a></li>
<li><a href=”http://cxvn.com/pview/26″><img src=”images/04.jpg” alt=”Css Template Preview” /></a></li>
<li><a href=”http://cxvn.com/pview/27″><img src=”images/05.jpg” alt=”Css Template Preview” /></a></li>
</ul>
</div>
<h3>Usage</h3>
<p>$(document).ready(function(){
$(“#slider”).easySlider({
auto: true,
continuous: true
});
});</p>
<h3>CSS</h3>
<p>#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
width:696px;
height:241px;
overflow:hidden;
}
#pvBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
}
#nextBtn{
left:696px;
}
#pvBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(images/btn_pv.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(images/btn_next.gif) no-repeat 0 0;
} </p>
<p><a href=”http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding” 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://cxvn.com”>Css Templates</a> by Templatica</p>
</div>
</div>

下载地址

立即下载