特效描述:基于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>

下载地址

立即下载

1.《jquery焦点图特效代码 通用幻灯片特效代码》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。

2.《jquery焦点图特效代码 通用幻灯片特效代码》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址,https://www.cxvn.com/code/focus/386.html