jQuery 幻灯片两款,缩略图和TAB风格

发布时间：2018-09-14 20:28:21 所属栏目：Asp教程来源：站长网

导读：分享两个比较实用的基于 jQuery 的幻灯片吧. 注释写了一个,不想写了,另一个还是原作者的英文注释.非原创,由我改良,无从考证原作者,在此感谢. 至于使用方法也就不写了(我声明了我最近比较懒,哈哈),比较简单,自己看DEMO修改吧. 本文出处：http://mrthink.net

　　分享两个比较实用的基于jQuery的幻灯片吧. 注释写了一个,不想写了,另一个还是原作者的英文注释.非原创,由我改良,无从考证原作者,在此感谢.

　　至于使用方法也就不写了(我声明了我最近比较懒,哈哈),比较简单,自己看DEMO修改吧.

　　本文出处：http://mrthink.net/　烈火没有替换Demo中的图片资源，如果图片无法显示，请只研究代码即可。

　　实例效果：

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>两个基于jQuery的渐隐渐显图片轮换幻灯片 = 烈火学院 Liehuo.Net</title> <style> div,ul, ol, li, h1,h2, p{margin:0;padding:0} body{font-size:0.8em;letter-spacing:1px;font-family:"<b>微软雅黑</b>"; line-height:1.2} a{color:#047;text-decoration:none} a:hover{color:#a40000;text-decoration:none} h1{font-size:1em; font-weight:normal; line-height:1.8em} h1 a{background:#CFF; padding:2px 3px; text-decoration:none} h1 a:hover{background:#eee; text-decoration:underline} h2{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto} ul,li{list-style:none} /*第一个幻灯样式--Modified@Mr.Think*/ #i_focus{width:460px; height:231px;background:#eee; padding:5px 5px 0 5px; margin:0 auto } #i_focus_pic{width:376px; height:226px;display:inline; position:relative;float:left;overflow:hidden} #i_focus_piclist { position:absolute} #i_focus_piclist li { width:378px; height:226px; overflow:hidden; display:none} #i_focus_piclist img { width:374px; height:224px; border:1px solid #fff} #i_focus_btn {float:right; width:77px} #i_focus_btn li {cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)} #i_focus_btn img { width:75px; height:70px; border:1px solid #fff; margin-bottom:2px} #i_focus_btn .i_cur {opacity:1; -moz-opacity:1; filter:alpha(opacity=100)} #i_focus_opdiv { position:absolute; left:0; bottom:0; width:374px; height:40px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); border:1px solid #fff; border-top:0} #i_focus_tx span{font-family:"微软雅黑"; font-size:16px; font-weight:bold; line-height:22px; display:block} #i_focus_tx { position:absolute; left:8px; bottom:2px; color:#FFF} #i_focus_tx .normal {display:none} /*第二个幻灯样式--Modified@Mr.Think*/ .slides { position:relative; overflow:hidden; width:704px; height:250px; border:5px solid #eee; margin:0 auto } .slide-pic{ overflow:hidden;width:703px} .slide-pic img{ width:701px; height:248px;border:1px solid #E4E4E4} .slide-pic li { display:none} .slide-pic li.cur { display:block} .slide-li { position:absolute; left:0; bottom:0; } .slide-li li { float:left; width:175px; height:30px; line-height:30px; margin-right:1px; text-align:center} .slide-li a:visited,.slide-li a:link { display:block; width:174px; height:30px; font-size:14px; color:#FFF} .slide-li .cur a:visited, .slide-li .cur a:link, .slide-li a:hover { color:#333; text-decoration:none} .op li { background:#666; opacity: 0.6; filter:alpha(opacity=60)} .op li.cur { background:#FFF} .slide-txt span { display:none} </style> </head> <body class="box"> <h1><a href="http://mrthink.net/">Mr.Think的个人博客</a><br />@专注前端技术,热爱PHP,崇尚简单生活.</h1> <h2>两个基于jQuery的渐隐渐显图片轮换幻灯片——如果不运行请刷新页面</h2>  <div id="i_focus"> <div id="i_focus_pic"> <ul id="i_focus_piclist" style="left:0; top:0;"> <li><a href="http://mrthink.net/" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="www.MrThink.net" /></a></li> <li><a href="http://mrthink.net/" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="www.MrThink.net" /></a></li> <li><a href="http://mrthink.net/" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="www.MrThink.net" /></a></li> </ul> <div id="i_focus_opdiv"></div>  <ul id="i_focus_tx"> <li class="normal"><span>Springs Best Accessories</span>The 7 key trends for the season b2</li> <li class="normal"><span>HAHAHAHAAH HAHA haha OHOH</span>THINK EVERY DAY</li> <li class="normal"><span>Okay okay okay okay</span>scrip jquery ue seo</li> </ul> </div>  <ul id="i_focus_btn"> <li class="i_cur" id="p0"><img src="http://img.ffffound.com/static-data/assets/6/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="www.MrThink.net" /></li> <li id="p1"><img src="http://img.ffffound.com/static-data/assets/6/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="www.MrThink.net" /></li> <li id="p2"><img src="http://img.ffffound.com/static-data/assets/6/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="www.MrThink.net" /></li> </ul> </div>  <br />  <div class="slides"> <ul class="slide-pic"> <li><a href="http://mrthink.net/"><img src="http://img.ffffound.com/static-data/assets/6/b2431f3432bcee4c0358fcb3bf8103c1288e70c3_m.jpg" alt="Modified@Mr.Think" /></a></li> <li class="cur"><a href="http://mrthink.net/"><img src="http://img.ffffound.com/static-data/assets/6/0d3a093594c71b7c969a247b7a18306abd6175f2_m.jpg" alt="专注前端技术" /></a></li> <li><a href="http://mrthink.net/"><img src="http://img.ffffound.com/static-data/assets/6/0d3a093594c71b7c969a247b7a18306abd6175f2_m.jpg" alt="天边夕阳再次映上" /></a></li> <li><a href="http://mrthink.net/"><img src="http://img.ffffound.com/static-data/assets/6/c80f38277bc3cf89be3c76cefebdc608c6fe512d_m.jpg" alt="曾梦想仗剑走天涯" /></a></li> </ul> <ul class="slide-li op"> <li></li> <li class="cur"></li> <li></li> <li></li> </ul> <ul class="slide-li slide-txt"> <li><a href="http://mrthink.net/">Modified@Mr.Think</a></li> <li class="cur"><a href="http://mrthink.net/">专注前端技术</a></li> <li><a href="http://mrthink.net/">天边夕阳再次映上</a></li> <li><a href="http://mrthink.net/">曾梦想仗剑走天涯</a></li> </ul> </div>  <script src="/uploads/common/js/jquery-1.3.2.js"></script> <script> $(document).ready(function() { var i_curIndex = 0; var beauBeauSlide; //函数对象 var i_curID = 0; //取得鼠标下方的对象ID var pictureID = 0; //索引ID $("#i_focus_piclist li").eq(0).show(); //默认 autoScroll(); $("#i_focus_btn li").hover(function() { StopScrolll(); $("#i_focus_btn li").removeClass("i_cur") //所有的li去掉当前的样式加上正常的样式 $(this).addClass("i_cur"); //而本身则加上当前的样式去掉正常的样式 i_curID = $(this).attr("id"); //取当前元素的ID pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符 $("#i_focus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示 $("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏 $("#i_focus_tx li").hide(); $("#i_focus_tx li").eq(pictureID).show(); }, function() { //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步 i_curID = $(this).attr("id"); //取当前元素的ID pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符 i_curIndex = pictureID; autoScroll(); }); //自动滚动 function autoScroll() { $("#i_focus_btn li:last").removeClass("i_cur"); $("#i_focus_tx li:last").hide(); $("#i_focus_btn li").eq(i_curIndex).addClass("i_cur"); $("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur"); $("#i_focus_tx li").eq(i_curIndex).show(); $("#i_focus_tx li").eq(i_curIndex - 1).hide(); $("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow"); $("#i_focus_piclist li").eq(i_curIndex - 1).hide(); i_curIndex++; i_curIndex = i_curIndex >= 3 ? 0 : i_curIndex; beauBeauSlide = setTimeout(autoScroll, 2000); } function StopScrolll() //当鼠标移动到对象上面的时候停止自动滚动 { clearTimeout(beauBeauSlide); } }); //第二个渐隐幻灯开始***Modified@Mr.Think@wwww.MrThink.net var defaultOpts = { interval: 3000, fadeInTime: 300, fadeOutTime: 200 }; //Iterate over the current set of matched elements var _titles = $("ul.slide-txt li"); var _titles_bg = $("ul.op li"); var _bodies = $("ul.slide-pic li"); var _count = _titles.length; var _current = 0; var _intervalID = null; var stop = function() { window.clearInterval(_intervalID); }; var slide = function(opts) { if (opts) { _current = opts.current || 0; } else { _current = (_current >= (_count - 1)) ? 0 : (++_current); }; _bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime, function() { _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime); _bodies.removeClass("cur").eq(_current).addClass("cur"); }); _titles.removeClass("cur").eq(_current).addClass("cur"); _titles_bg.removeClass("cur").eq(_current).addClass("cur"); }; //endof slide var go = function() { stop(); _intervalID = window.setInterval(function() { slide(); }, defaultOpts.interval); }; //endof go var itemMouseOver = function(target, items) { stop(); var i = $.inArray(target, items); slide({ current: i }); }; //endof itemMouseOver _titles.hover(function() { if ($(this).attr('class') != 'cur') { itemMouseOver(this, _titles); } else { stop(); } }, go); //_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go); _bodies.hover(stop, go); //trigger the slidebox go(); var slideX = { _this: $('.catalog .imgbox'), _btnLeft: $('.catalog .left'), _btnRight: $('.catalog .right'), init: function() { slideX._btnLeft.click(slideX.slideLeft); slideX._btnRight.click(slideX.slideRight); }, slideLeft: function() { slideX._btnLeft.unbind('click', slideX.slideLeft); for (i = 0; i < 2; i++) { slideX._this.find('li:last').prependTo(slideX._this); } slideX._this.css('marginLeft', -224); slideX._this.animate({ 'marginLeft': 0 }, 500, function() { slideX._btnLeft.bind('click', slideX.slideLeft); }); return false; }, slideRight: function() { slideX._btnRight.unbind('click', slideX.slideRight); slideX._this.animate({ 'marginLeft': -224 }, 500, function() { slideX._this.css('marginLeft', '0'); for (i = 0; i < 2; i++) { slideX._this.find('li:first').appendTo(slideX._this) } slideX._btnRight.bind('click', slideX.slideRight); }); return false; } } $(document).ready(function() { slideX.init(); }) $(document).ready(function() { var newTime = new Date(); var newTime = newTime.getTime(); var $imgTmp = $('#topromotion').find('img:first'); var osrc = $imgTmp.attr('src'); $imgTmp.attr('src', osrc + '?' + newTime); }); </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!