插件描述：图片切换，带有标题和缩略图，效果很好，修改非常简单，兼容各大浏览器
在head里引入css和js:
1 2 3 | <link rel="stylesheet" type="text/css" href="images/index.css"><script type="text/javascript" src="js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="js/jquery.slides.js"></script> |
在ul中修改你想要的大图片：
1 2 3 4 5 6 | <ul class="silder_con"> <li class="silder_panel"><a href="" target="_blank" class="f_l"><img src="images/1.jpg" width="600" height="375" /></a></li> <li class="silder_panel"><a href="" target="_blank" class="f_l"><img src="images/2.jpg" width="600" height="375" /></a></li> <li class="silder_panel"><a href="" target="_blank" class="f_l"><img src="images/3.jpg" width="600" height="375" /></a></li> <li class="silder_panel"><a href="" target="_blank" class="f_l"><img src="images/4.jpg" width="600" height="375" /></a></li><ul> |
缩略图代码修改小图：
1 2 3 4 5 6 | <ul class="silder_nav dec"> <li><a href="#" target="_blank"><img src="images/1.jpg" width="110" height="48" /></a></li> <li><a href="#" target="_blank"><img src="images/2.jpg" width="110" height="48" /></a></li> <li><a href="#" target="_blank"><img src="images/3.jpg" width="110" height="48" /></a></li> <li><a href="#"><img src="images/4.jpg" width="110" height="48" /></a></li> </ul> |
图片名称修改代码：
1 2 3 4 5 6 7 8 9 10 11 12 | 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> |
修改自动切换时间：
1 2 3 4 5 6 7 8 9 10 | // mouse $("#slider_name").hover(function() { clearInterval(picTimer);},function() { picTimer = setInterval(function() { showPics(index); index++; if(index == len) {index = 0;} },3000); }).trigger("mouseleave"); |
默认是3秒，自己可以修改为自己想要的时间。
非常方便使用
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 后台管理设计
- 下一个特效： HTML5CSS3分步提示框Tooltip 可嵌入任意HTML元素