效果预览：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='/images/loading.gif' data-original="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="http://hovertree.com/hvtimg/bjafjd/uqa9cu66.jpg" width="110" height="48" /></a></li><li><a href="http://hovertree.com/texiao/game/"><img src='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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='/images/loading.gif' data-original="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
原标题：jQuery图片轮播切换
关键词：jquery
我知道了 