特效描述:利用jQuery实现 多功能 幻灯片,利用jQuery实现多功能幻灯片

代码结构

1. 引入CSS

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

<link rel="stylesheet" type="text/css" href="css/wt-gallery.css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="js/jquery.wt-gallery.min.js"></script>

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

3. HTML代码

<div class="panel">
<div class="container">
<div class="wt-gallery">
<div class="main-screen">
<noscript>
<!– placeholder image when javascript is off –>
<img src="images/img/triworks_abstract27.jpg" alt=""/>
</noscript>
</div>
<div class="cpanel">
<div class="thumbs-back"></div>
<div class="thumbnails">
<ul>
<li>
<div>
<a href="images/img/triworks_abstract27.jpg"><img src="images/triworks_abstract27.jpg" alt=""/></a>
<p>3D abstract art</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum no vocibus accusamus dignissim
et, eius erat an ius, quot zzril facilisi an
no. Sit brute laoreet deserunt id, sit at
aeterno diceret officiis. Exerci legendos
dignissim duo no. </div>
</div>
</li>
<li>
<div>
<a href="images/img/hk.jpg"><img src="images/hk.jpg" alt=""/></a>
<p>hong kong</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum no vocibus accusamus dignissim
et, eius erat an ius, quot zzril facilisi an
no. Sit brute laoreet deserunt id, sit at
aeterno diceret officiis. Exerci legendos
dignissim duo no. </div>
</div>
</li>
<li>
<div>
<a href="images/img/lion.jpg"><img src="images/lion.jpg" alt=""/></a>
<p>lion</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum eu quis omnis referrentur est,
mel cu option inimicus dissentiunt. Et usu
vivendum suavitate interptaris, ei laudem
animal mea. Primis pertinax efficiantur an
per, ea doming denique theophrastus sea. Sit
brute laoreet deserunt id, sit at aeterno
diceret officiis. </div>
</div>
</li>
<li>
<div>
<a href="images/img/vancouver.jpg"><img src="images/vancouver.jpg" alt=""/></a>
<p>vancouver</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum eu quis omnis referrentur est,
mel cu option inimicus dissentiunt. Et usu
vivendum suavitate interptaris, ei laudem
animal mea. Primis pertinax efficiantur an
per, ea doming denique theophrastus sea. Sit
brute laoreet deserunt id, sit at aeterno
diceret officiis. </div>
</div>
</li>
<li>
<div>
<a href="images/img/3d_room.jpg"><img src="images/3d_room.jpg" alt=""/></a>
<p>3D room</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vitae tempus nulla. </div>
</div>
</li>
<li>
<div>
<a href="images/img/sf.jpg"><img src="images/sf.jpg" alt=""/></a>
<p>san francisco</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum no vocibus accusamus dignissim
et, eius erat an ius, quot zzril facilisi an
no. Sit brute laoreet deserunt id, sit at
aeterno diceret officiis. Exerci legendos
dignissim duo no. </div>
</div>
</li>
<li>
<div>
<a href="images/img/aquarium.jpg"><img src="images/aquarium.jpg" alt=""/></a>
<p>aquarium</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum eu quis omnis referrentur est,
mel cu option inimicus dissentiunt. Et usu
vivendum suavitate interptaris, ei laudem
animal mea. Primis pertinax efficiantur an
per, ea doming denique theophrastus sea. Sit
brute laoreet deserunt id, sit at aeterno
diceret officiis. </div>
</div>
</li>
<li>
<div>
<a href="images/img/train.jpg"><img src="images/train.jpg" alt=""/></a>
<p>train</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vitae tempus nulla. </div>
</div>
</li>
<li>
<div>
<a href="images/img/building.jpg"><img src="images/building.jpg" alt=""/></a>
<p>building</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum no vocibus accusamus dignissim
et, eius erat an ius, quot zzril facilisi an
no. Sit brute laoreet deserunt id, sit at
aeterno diceret officiis. Exerci legendos
dignissim duo no. </div>
</div>
</li>
<li>
<div>
<a href="images/img/triworks_abstract23.jpg"><img src="images/triworks_abstract23.jpg" alt=""/></a>
<p>3D abstract art</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vitae tempus nulla. </div>
</div>
</li>
<li>
<div>
<a href="images/img/room.jpg"><img src="images/room.jpg" alt=""/></a>
<p>architecture</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vitae tempus nulla. </div>
</div>
</li>
<li>
<div>
<a href="images/img/kariminal_mountain.jpg"><img src="images/kariminal_mountain.jpg" alt=""/></a>
<p>kariminal mountain</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque vitae tempus nulla. </div>
</div>
</li>
<li>
<div>
<a href="images/img/madness_arch2.jpg"><img src="images/madness_arch2.jpg" alt=""/></a>
<p>architecture</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum no vocibus accusamus dignissim
et, eius erat an ius, quot zzril facilisi an
no. Sit brute laoreet deserunt id, sit at
aeterno diceret officiis. Exerci legendos
dignissim duo no. </div>
</div>
</li>
<li>
<div>
<a href="images/img/triworks_abstract17.jpg"><img src="images/triworks_abstract17.jpg" alt=""/></a>
<p>3D abstract art</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum eu quis omnis referrentur est,
mel cu option inimicus dissentiunt. Et usu
vivendum suavitate interptaris, ei laudem
animal mea. Primis pertinax efficiantur an
per, ea doming denique theophrastus sea. Sit
brute laoreet deserunt id, sit at aeterno
diceret officiis. </div>
</div>
</li>
<li>
<div>
<a href="images/img/bar.jpg"><img src="images/bar.jpg" alt=""/></a>
<p>bar</p>
</div>
<div class="data">
<a href="http://cxvn.com/" target="_blank"></a>
<div>
<h1>JQuery Gallery</h1>
Lorem ipsum eu quis omnis referrentur est,
mel cu option inimicus dissentiunt. Et usu
vivendum suavitate interptaris, ei laudem
animal mea. Primis pertinax efficiantur an
per, ea doming denique theophrastus sea. Sit
brute laoreet deserunt id, sit at aeterno
diceret officiis. </div>
</div>
</li>
</ul>
</div>
<div class="thumbs-fwd"></div>
</div>
</div>
</div>
<div class="info-section">
<div class="form-panel">
<form name="ctrlForm">
<div class="form-sec">
<label for="effects"><b>Transition:</b></label><br/>
<select name="effects" id="effects">
<option value="none">none</option>
<option value="fade">fade</option>
<option value="h.slide" selected="selected">horizontal
slide</option>
<option value="v.slide">vertical slide</option>
<option value="random">random</option>
<optgroup label="vertical stripes">
<option value="vert.tl">top left</option>
<option value="vert.tr">top right</option>
<option value="vert.bl">bottom left</option>
<option value="vert.br">bottom right</option>
<option value="fade.left">left fade</option>
<option value="fade.right">right fade</option>
<option value="alt.left">left alternating</option>
<option value="alt.right">right alternating</option>
<option value="blinds.left">left blinds</option>
<option value="blinds.right">right blinds</option>
<option value="vert.random.fade">random fade</option>
</optgroup>
<optgroup label="horizontal stripes">
<option value="horz.tl">top left</option>
<option value="horz.tr">top right</option>
<option value="horz.bl">bottom left</option>
<option value="horz.br">bottom right</option>
<option value="fade.top">top fade</option>
<option value="fade.bottom">bottom fade</option>
<option value="alt.top">top alternating</option>
<option value="alt.bottom">bottom alternating</option>
<option value="blinds.top">top blinds</option>
<option value="blinds.bottom">bottom blinds</option>
<option value="horz.random.fade">random fade</option>
</optgroup>
</select>
</div>
<div class="form-sec">
<b>Text Align:</b><br/>
<div>
<input type="radio" name="text-align" value="top" id="top-align" checked="checked"/>&nbsp;<label for="top-align">top</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="text-align" value="bottom" id="bottom-align"/>&nbsp;<label for="bottom-align">bottom</label>
</div>
</div>
<div class="form-sec">
<b>Caption Type:</b><br/>
<div>
<input type="radio" name="cap-type" value="inside" id="inside-cap" checked="checked"/>&nbsp;<label for="inside-cap">inside</label>&nbsp;
<input type="radio" name="cap-type" value="tooltip" id="tooltip-cap"/>&nbsp;<label for="tooltip-cap">tooltip</label>
</div>
</div>
<div class="form-sec">
<b>Thumbnails Align:</b><br/>
<div>
<input type="radio" name="thumbs-align" value="top" id="thumbs-top-align"/>&nbsp;<label for="thumbs-top-align">top</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="thumbs-align" value="bottom" id="thumbs-bottom-align" checked="checked"/>&nbsp;<label for="thumbs-bottom-align">bottom</label>
</div>
</div>
<div class="form-sec">
<b>Display:</b><br/>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="105"><input type="checkbox" name="imgnav-cb" id="imgnav-cb" checked="checked"/>&nbsp;<label for="imgnav-cb">pv
/ next</label></td>
<td><input type="checkbox" id="play-cb" name="play-cb" checked="checked"/>&nbsp;<label for="play-cb">play</label></td>
</tr>
<tr>
<td><input type="checkbox" id="timer-cb" name="timer-cb" checked="checked"/>&nbsp;<label for="timer-cb">timer
bar</label></td>
<td><input type="checkbox" id="imgnum-cb" name="imgnum-cb"/>&nbsp;<label for="imgnum-cb">image
#</label></td>
</tr>
<tr>
<td><input type="checkbox" id="thumbnav-cb" name="thumbnav-cb" checked="checked"/>&nbsp;<label for="thumbnav-cb">thumb
buttons</label></td>
<td><input type="checkbox" id="page-cb" name="page-cb" checked="checked"/>&nbsp;<label for="page-cb">indexes</label></td>
</tr>
<tr>
<td><input type="checkbox" id="arrow-cb" name="arrow-cb" checked="checked"/>&nbsp;<label for="arrow-cb">selected
arrow</label></td>
<td><input type="checkbox" id="thumbnum-cb" name="thumbnum-cb"/>&nbsp;<label for="thumbnum-cb">thumb
#</label></td>
</tr>
</table>
</div>
<div class="form-sec">
<b>Mouseover:</b><br/>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="95"><input type="checkbox" id="mouseover-text" name="mouseover-text"/>&nbsp;<label for="mouseover-text">text
panel</label></td>
<td><input type="checkbox" id="mouseover-caption" name="mouseover-caption" checked="checked"/>&nbsp;<label for="mouseover-caption">captions</label></td>
</tr>
<tr>
<td><input type="checkbox" id="mouseover-info" name="mouseover-info"/>&nbsp;<label for="mouseover-info">info
panel</label></td>
<td><input type="checkbox" id="mouseover-btns" name="mouseover-btns"/>&nbsp;<label for="mouseover-btns">buttons</label></td>
</tr>
</table>
</div>
<div class="form-sec"><input type="button" value="Submit" id="submit-btn"/>&nbsp;<input type="button" value="Reset" id="reset-btn" style="width:55px"/></div>
</form>
</div>
<div class="description">
This is an image gallery jQuery plugin featuring a horizontal
thumbnail layout.<br/>
The sliding thumbnails and buttons allow for easy navigation of your
image portfolio. The gallery is also re-sizable and configurable
through the plugin's parameters.
<br/><br/>
<strong>features:</strong>
<ul>
<li>Multiple image transitions available. Also can set
transition individually, randomly or turn off transition.</li>
<li>Able to turn auto image rotation on/off with configurable
individual time delay.</li>
<li>Changeable number of thumbnails visible per scroll.</li>
<li>Able to shuffle images in random order.</li>
<li>Mouse over main image to access directional buttons for
navigating pvious/next image.</li>
<li>Thumbnail directional buttons and pagination indexes allow
for navigating thumbnails.</li>
<li>Editable captions available for each thumbnail.</li>
<li>Different links are assignable for each image.</li>
</ul>
</div>
</div>
<div style="text-align:center;clear:both">
</div>
</div>

下载地址

立即下载

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

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

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