jquery焦点图特效代码 通用幻灯片特效代码

特效描述：基于jQuery实现 通用幻灯片特效，基于jQuery实现通用幻灯片特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="style.css" />

2. 引入JS

<script type="text/javascript" src="script.js"></script>

3. HTML代码

<div id="wrapper">
<div>
<div class="sliderbutton"><img src="images/left.gif" width="32" height="38" alt="Previous" onClick="slideshow.move(-1)" /></div>
<div id="slider">
<ul>
<li id="content">
<h1>TinySlider – Simple JavaScript Slideshow</h1>
<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>
<p><em>For complete details visit <a href="http://cxvn.com/">cxvn.com</a>.</em></p>
</li>
<li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li>
<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li>
<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li>
</ul>
</div>
<div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Next" onClick="slideshow.move(1)" /></div>
</div>
<ul id="pagination" class="pagination">
<li onClick="slideshow.pos(0)">1</li>
<li onClick="slideshow.pos(1)">2</li>
<li onClick="slideshow.pos(2)">3</li>
<li onClick="slideshow.pos(3)">4</li>
</ul>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide(‘slideshow’,{
id:’slider’,
auto:3,
resume:true,
vertical:false,
navid:’pagination’,
activeclass:’current’,
position:0
});
</script>
<div style="text-align:center;clear:both"><br>
</div>

下载地址

立即下载