效果预览：http://hovertree.com/texiao/jquery/51/
这款特效有缩略图，包含文字说明和链接，可以自动播放，也可以手动切换。
使用的jQuery库版本为1.12.3 ，当然项1.11.1等也是可以的。下载地址：http://hovertree.com/h/bjaf/ati6k7yk.htm
效果图：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery适合风景展现幻灯片代码 - 何问起</title><base target="_blank" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/51/images/index.css"> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/jquery/51/js/jquery.slides.js"></script> </head> <body> <div style="text-align:center;"><h1>jQuery带缩略图的图片切换</h1></div> <div id="yxh_article"> <div class="slider_box" id="slider_name"> <div class="mask"></div> <ul class="silder_con"> <li class="silder_panel"><a href="http://hovertree.com/h/bjaf/41eyinh2.htm" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/uqa9cu66.jpg" width="600" height="375" /></a></li> <li class="silder_panel"><a href="http://hovertree.com/texiao/game/" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/2m6dep2i.jpg" width="600" height="375" /></a></li> <li class="silder_panel"><a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/rrlmyu1g.jpg" width="600" height="375" /></a></li> <li class="silder_panel"><a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm" class="f_l"><img src="http://hovertree.com/hvtimg/bjafjd/81q15f9j.jpg" width="600" height="375" /></a></li> </ul> <div class="silder_intro"> <h3>荷叶</h3> </div> <div class="silder_intro"> <h3>内衣</h3> </div> <div class="silder_intro"> <h3>沙滩</h3> </div> <div class="silder_intro"> <h3>大海</h3> </div> <ul class="silder_nav dec"> <li><a href="http://hovertree.com/h/bjaf/41eyinh2.htm"><img src="http://hovertree.com/hvtimg/bjafjd/uqa9cu66.jpg" width="110" height="48" /></a></li> <li><a href="http://hovertree.com/texiao/game/"><img src="http://hovertree.com/hvtimg/bjafjd/2m6dep2i.jpg" width="110" height="48" /></a></li> <li><a href="http://hovertree.com/h/bjaf/c7lmaqjx.htm"><img src="http://hovertree.com/hvtimg/bjafjd/rrlmyu1g.jpg" width="110" height="48" /></a></li> <li><a href="http://hovertree.com/h/bjaf/hwqtjwjs.htm"><img src="http://hovertree.com/hvtimg/bjafjd/81q15f9j.jpg" width="110" height="48" /></a></li> </ul> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/picqiehuan.htm">原文</a></p> </div> </body> </html>
转自：http://hovertree.com/h/bjaf/picqiehuan.htm
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html
时间： 2024-11-11 08:49:06