焦点图切换代码、jQuery多功能幻灯片代码

久旱逢甘雨 2019-11-19 127 阅读

特效描述:利用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>

演示地址下载地址

最新游戏