你的位置:首页 > Java教程

[Java教程]jQuery图片轮播切换


效果预览: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