标签：
像TAB选项卡一样的图片切换效果，基于jquery来实现，试试这个图片切换有12345数字一起切换有小图大图一起切换里面有教程和源码，鼠标放上图片左侧的彩条上，右侧的大图片和左侧的文字说明一起切换。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>类似选项卡竖向排版的jquery图文同步切换效果丨石家庄门禁</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px "Helvetica Neue",Helvetica,STheiti,微软雅黑,黑体,Arial,Tahoma,sans-serif,serif} body{background:#f6f6f6} .fl{float:left} a{text-decoration:none} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block} *html .clearfix{height:1%} .clearfix{display:block} /* m-banner */ .m-banner{padding:10px 10px 10px 0;height:239px;border:1px solid #dedede;width:755px;margin:20px auto;} .mb-news{width:270px;padding:0 15px;line-height:1.8} .mb-news h4{word-break:break-all;word-wrap:break-word} .mb-news h4 a{font-size:18px;color:#8c3608;line-height:1.6;word-break:break-all;word-wrap:break-word} .mb-news p{font-size:14px;color:#444;margin-top:15px;overflow:hidden} .mb-news h4 a:hover{text-decoration:underline} .mb-img{width:455px;height:239px} .mb-inav{width:10px;margin-right:1px} .mb-inav li{width:10px;height:79px;margin-bottom:1px} .mb-inav li a{display:block;width:10px;height:79px;background:#bdbdbd} .mb-inav li a.cur{background:#671900} .mb-ibox{width:444px;height:239px;position:relative;overflow:hidden} .mb-ibox a{display:block;width:444px;height:239px;overflow:hidden;position:absolute;top:0;left:0;z-index:10;display:none} </style> <script src="/images/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 图片轮播 bannerRotate.bannerInit(); }); var bannerRotate = { _time: 3000, _fade: 200, _i: 0, _interval: null, _navId: "#mb-inav", _navBox: "#mb-ibox", _navTxt: "#mb-itxt", bannerShow: function() { $(this._navId).find("li a").removeClass("cur"); $(this._navId).find("li:eq("+this._i+")").find("a").addClass("cur"); $(this._navBox).find("a").fadeOut(this._fade); $(this._navBox).find("a:eq("+this._i+")").fadeIn(this._fade); $(this._navTxt).find("div").hide(); $(this._navTxt).find("div:eq("+this._i+")").fadeIn(this._fade); }, bannerStart:function() { var _this = this; _this._interval = setInterval(function() { if(_this._i >= 2) { _this._i = 0; } else { _this._i++; } _this.bannerShow(); }, _this._time); }, bannerInit: function() { var _this = this; _this.bannerStart(); $(_this._navId).find("li a").bind("mouseover", function() { clearInterval(_this._interval); _this._i = $(this).parent().index(); _this.bannerShow(); _this.bannerStart(); }); } }; </script> </head> <body> <div class="m-banner"> <div id="mb-itxt" class="mb-news fl"> <div style="display:block;"> <h4><a href="/">秋之红叶</a></h4> <p>试试这个图片切换有12345数字一起切换有小图大图一起切换里面有教程和源码</p> </div> <div style="display:none;"> <h4><a href="/">路边野花</a></h4> <p>content222...</p> </div> <div style="display:none;"> <h4><a href="/">往事如茶</a></h4> <p>content333...</p> </div> </div> <div class="mb-img fl clearfix"> <ul id="mb-inav" class="mb-inav fl"> <li><a class="cur"></a></li> <li><a></a></li> <li><a></a></li> </ul> <div id="mb-ibox" class="mb-ibox fl"> <a href="/" style="display:block;"><img width="440" height="239" src="/images/m01.jpg" alt="111" /></a> <a href="/"><img width="440" height="239" src="/images/m02.jpg" alt="222" /></a> <a href="/"><img width="440" height="239" src="/images/m03.jpg" alt="333" /></a> </div> </div> </div> <div style="text-align:center;clear:both"> </div> </body> </html> <BR>所需js文件：<a href="/images/jquery-1.9.1.min.js" target=_blank>jquery-1.9.1.min.js</a> <hr>
标签：
原文地址：http://www.cnblogs.com/zhaozzm/p/4528427.html
