JQuery：渐隐渐显图片轮换幻灯片
来源：互联网 发布：图坦卡蒙的诅咒 知乎 编辑：程序博客网 时间：2024/05/19 19:43
来自：http://outofmemory.cn/code-snippet/4443/jQuery-liangge-with-jQuery-jianyin-jianxian-tupian-lunhuan-huandeng-sheet
<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="#" target="_blank"><img src="" alt="提示" /></a></li> <li><a href="#" target="_blank"><img src="" alt="提示" /></a></li> <li><a href="#" target="_blank"><img src="" alt="提示" /></a></li> </ul> <div id="i_focus_opdiv"></div> <!--slide大图374*224--> <ul id="i_focus_tx"> <li class="normal"><span>desc-1</span>desc-2</li> <li class="normal"><span>desc-3</span>desc-4</li> <li class="normal"><span>desc-5</span>desc-6</li> </ul> </div> <!--slide右侧小缩略图75*70--> <ul id="i_focus_btn"> <li class="i_cur" id="p0"><img src="" alt="提示 " /></li> <li class="i_cur" id="p1"><img src="" alt="提示 " /></li> <li class="i_cur" id="p2"><img src="" alt="提示 " /></li> </ul></div><!--//end--><br /><!--*第二个幻灯*--><div class="slides "> <ul class="slide-pic "> <li><a href="# "><img src=" " alt=" "></a></li> <li><a href="# "><img src=" " alt=" "></a></li> <li><a href="# "><img src=" " 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="# ">desc-1</a></li> <li class="cur "><a href="# ">desc-2</a></li> <li><a href="# ">desc-3</a></li> <li><a href="# ">desc-4</a></li> </ul></div>
<script src="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); }});//第二个渐隐幻灯开始var defaultOpts = { interval: 3000, fadeInTime: 300, fadeOutTime: 200};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 slidevar go = function() { stop(); _intervalID = window.setInterval(function() { slide(); }, defaultOpts.interval);}; //endof govar 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);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><style>div, ul, ol, li, h1, h2, p { margin:0; padding:0}body { font-size:0.8em; letter-spacing:1px; font-family:"微软雅黑"; 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}/*第一个幻灯样式*/#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}/*第二个幻灯样式*/.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>- JQuery：渐隐渐显图片轮换幻灯片
- JQuery 图片轮换，图片幻灯片
- 图片循环渐显渐隐
- 渐显渐隐的图片轮换广告（摘自yahoo.com.cn）
- 鼠标触发图片渐隐渐显效果HTC
- jQuery实现带缩略图的渐显渐隐图片幻灯切换效果
- js实现图片渐隐渐显的切换效果
- QML 实现图片帧渐隐渐显轮播
- Unity3d UI渐隐渐显
- jquery 轮换图片
- JQuery实现图片轮换
- JQuery实现图片轮换
- Jquery 实现图片轮换
- jquery实现图片轮换
- C#中窗体渐显渐隐
- jquery 图片轮换 潇湘博客
- JQuery图片轮换器原理
- Jquery图片滚动，幻灯片
- 大型网站架构技术方案集锦
- cocos2d 相关工具
- nginx事件模块分析(二)
- 浅谈SQLite——查询处理及优化
- How to find second highest or maximum salary of Employee in SQL - Interview question
- JQuery：渐隐渐显图片轮换幻灯片
- 生成 android web service 客户端代码
- c# 处理大批量数据 时遇到 类型为“System.OutOfMemoryException”的异常
- 做什么职业，也别做程序员
- linux下解压命令大全
- poj 3311 Hie with the Pie
- 能获取ContentPresenter节点下的节点
- 转载 基本的图像采集流程
- Android内存优化
