码迷,mamicode.com
首页 > Web开发 > 详细

jQuery图片轮播特效

时间:2016-04-21 13:37:45      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:

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

jQuery图片轮播特效

标签:

原文地址:http://www.cnblogs.com/roucheng/p/jquerytupian.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!