缓冲动感的图文混排切换代码，按钮控制左右滚动，百度有啊通栏图片展示效果代码，基于JavaScript实现，事件的绑定采用事件委托处理。对于研究JS有重要的借鉴意义。 示例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>百度有啊通栏展示效果</title><br /> <style type="text/css"><br /> body,div,dl,dt,dd,ul,li,h3{margin:0;padding:0;}<br /> body{color:#333;font:12px/1.5 arial;}<br /> li{list-style:none;}<br /> a:link,a:visited,a:active{color:#333;text-decoration:none;}<br /> a:hover{color:#F30;}<br /> img{border:none;}<br /> #box{width:740px;margin:10px auto;}<br /> #container{position:relative;height:232px;background:#FCFCFC;}<br /> #container .item{position:absolute;top:0;left:0;width:492px;height:230px;overflow:hidden;background:#FAFAFA;border:1px solid #ddd;z-index:1;opacity:1;}<br /> #container .item .pic{float:left;width:210px;height:200px;display:inline;margin:15px;}<br /> #container .item .pic img{width:210px;height:200px;vertical-align:top;}<br /> #container .item .txt{float:left;width:250px;margin-top:12px;}<br /> #container .item .txt dt{font-size:14px;font-weight:700;}<br /> #container .item .txt .info{color:#999;}<br /> #container .item .txt dd{height:24px;line-height:24px;}<br /> #container .item .txt dd span{float:left;}<br /> #container .item .txt .star{position:relative;float:left;height:12px;width:69px;margin:6px 0 0 5px;}<br /> #container .item .txt .star .star_red{position:absolute;top:0;left:0;height:12px;width:69px;z-index:2;background:url(/uploads/allimg/1109/veryhuo_star.png) repeat-x scroll left top transparent;}<br /> #container .item .txt .star .star_grey{background:url(/uploads/allimg/1109/veryhuo_star.png) repeat-x scroll left -15px transparent;height:12px;width:69px;}<br /> #container .item .txt .pink,#container .item .txt .blue,#container .item .txt .green{color:#FFF;font-weight:700;margin-right:2px;background:#F66B5B;padding:0 5px;}<br /> #container .item .txt .blue{background:#96BAE7;}<br /> #container .item .txt .green{background:#9CDBC3;}<br /> #container .item .txt .comment{width:232px;height:99px;margin-top:10px;background:#FFF;border:1px solid #EAEAEA;}<br /> #container .item .txt .comment h3{font-size:12px;font-weight:400;height:24px;line-height:24px;border-bottom:1px solid #E9E9E9;padding:0 10px;}<br /> #container .item .txt .comment .comment_list{width:220px;height:60px;overflow:hidden;margin:8px 0 0 10px;}<br /> #container .item .txt .comment .comment_list ul{width:220px;}<br /> #container .item .txt .comment .comment_list ul li{height:20px;line-height:20px;white-space:nowrap;}<br /> #container .item .txt .comment .comment_list ul li b{color:#999;font-weight:400;}<br /> #control{height:37px;text-align:center;background:url(/uploads/allimg/1109/veryhuo_bg.png) no-repeat;}<br /> #control span{width:8px;height:8px;font-size:0;line-height:0;cursor:pointer;display:inline-block;background-color:#FEFEFE;border:1px solid #BCC1C5;margin:13px 2px 2px;}<br /> #control span.active{background-color:#848484;border:1px solid #6E6E6E;}<br /> </style><br /> <script type="text/javascript"><br /> function Youa (obj)<br /> {<br /> this.obj = $(obj);<br /> this.container = $("container");<br /> this.control = $("control");<br /> this.items = $$$("item", this.container);<br /> this.iCenter = 2;<br /> this.aSort = [];<br /> this.timer = null;<br /> this.oData = [<br /> {left:0, zIndex:2, opacity:30},<br /> {left:40, zIndex:3, opacity:60},<br /> {left:124, zIndex:4, opacity:100},<br /> {left:208, zIndex:3, opacity:60},<br /> {left:246, zIndex:2, opacity:30},<br /> {left:40, zIndex:0, opacity:0}<br /> ];<br /> this.__create__()<br /> };<br /> Youa.prototype.__create__ = function ()<br /> {<br /> var that = this;<br /> var oSpan = null;<br /> var i = 0;<br /> for (i = 0; i < that.items.length; i++)<br /> {<br /> that.items[i].number = i;<br /> that.aSort[i] = that.items[i];<br /> oSpan = document.createElement("span");<br /> oSpan.number = i;<br /> that.control.appendChild(oSpan)<br /> }<br /> for (i = 0; i < 2; i++) this.aSort.unshift(this.aSort.pop());<br /> that.aSpan = $$("span", that.control);<br /> that.control.onmouseover = function (ev)<br /> {<br /> var oEv = ev || event;<br /> var oTarget = oEv.target || oEv.srcElement;<br /> if (oTarget.tagName.toUpperCase() == "SPAN")<br /> {<br /> that.aSort.sort(function (a, b) {return a.number - b.number});<br /> if (oTarget.number < that.iCenter)<br /> {<br /> for (i = 0; i < that.iCenter - oTarget.number; i++) that.aSort.unshift(that.aSort.pop());<br /> that.__set__();<br /> return false<br /> }<br /> else if (oTarget.number > that.iCenter)<br /> {<br /> for (i = 0; i < oTarget.number - that.iCenter; i++) that.aSort.push(that.aSort.shift());<br /> that.__set__();<br /> return false<br /> }<br /> else<br /> {<br /> that.__set__()<br /> }<br /> }<br /> }<br /> this.__set__();<br /> this.__switch__();<br /> this.__autoPlay__()<br /> };<br /> Youa.prototype.__set__ = function ()<br /> {<br /> var i = 0;<br /> for (i = 0; i < this.aSort.length; i++) this.container.appendChild(this.aSort[i]);<br /> for (i = 0; i < this.aSpan.length; i++) this.aSpan[i].className = "";<br /> this.aSpan[this.aSort[this.iCenter].number].className = "active";<br /> for (i = 0; i < this.aSort.length; i++)<br /> {<br /> this.aSort[i].index = i;<br /> if (i < 5)<br /> {<br /> new Animate(this.aSort[i], this.oData[i]);<br /> }<br /> else<br /> {<br /> new Animate(this.aSort[i], this.oData[this.oData.length - 1])<br /> }<br /> }<br /> };<br /> Youa.prototype.__switch__ = function ()<br /> {<br /> var i = 0;<br /> var that = this;<br /> this.container.onclick = function (ev)<br /> {<br /> var oEv = ev || event;<br /> var oTarget = oEv.target || oEv.srcElement;<br /> var index = findItem(oTarget);<br /> if (index < that.iCenter)<br /> {<br /> for (i = 0; i < that.iCenter - index; i++) that.aSort.unshift(that.aSort.pop());<br /> that.__set__();<br /> return false<br /> }<br /> else if (index > that.iCenter)<br /> {<br /> for (i = 0; i < index - that.iCenter; i++) that.aSort.push(that.aSort.shift());<br /> that.__set__();<br /> return false<br /> }<br /> function findItem (element)<br /> {<br /> return element.className == "item" ? element.index : arguments.callee(element.parentNode)<br /> }<br /> };<br /> };<br /> Youa.prototype.__autoPlay__ = function ()<br /> {<br /> var that = this;<br /> that.timer = setInterval(function ()<br /> {<br /> that.aSort[3].click()<br /> }, 3000);<br /> that.obj.onmouseover = function ()<br /> {<br /> clearInterval(that.timer)<br /> };<br /> that.obj.onmouseout = function ()<br /> {<br /> that.timer = setInterval(function ()<br /> {<br /> that.aSort[3].click()<br /> }, 3000)<br /> }<br /> };<br /> function $ (id)<br /> {<br /> return typeof id === "string" ? document.getElementById(id) : id<br /> };<br /> function $$ (tagName, oParent)<br /> {<br /> return (oParent || document).getElementsByTagName(tagName)<br /> };<br /> function $$$ (className, element, tagName)<br /> {<br /> var i = 0;<br /> var aClass = [];<br /> var reClass = new RegExp("(^|//s)" + className + "(//s|$)");<br /> var aElement = $$(tagName || "*", element || document);<br /> for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]);<br /> return aClass<br /> };<br /> function css (element, attr, value)<br /> {<br /> if (arguments.length == 2)<br /> {<br /> if (typeof arguments[1] === "string")<br /> {<br /> return element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr]<br /> }<br /> else<br /> {<br /> for (var property in attr)<br /> {<br /> property == "opacity" ?<br /> (element.style.filter = "alpha(opacity=" + attr[property] + ")", element.style.opacity = attr[property] / 100) :<br /> element.style[property] = attr[property]<br /> }<br /> }<br /> }<br /> else if (arguments.length == 3)<br /> {<br /> switch (attr)<br /> {<br /> case "width":<br /> case "height":<br /> case "top":<br /> case "left":<br /> case "right":<br /> case "bottom":<br /> element.style[attr] = value + "px";<br /> break;<br /> case "opacity" :<br /> element.style.filter = "alpha(opacity=" + value + ")";<br /> element.style.opacity = value / 100;<br /> break;<br /> default :<br /> element.style[attr] = value;<br /> break<br /> }<br /> }<br /> return element<br /> };<br /> function Animate (element, options, fnCallBack)<br /> {<br /> this.obj = $(element);<br /> this.options = options;<br /> this.__onEnd__ = fnCallBack;<br /> this.__startMove__()<br /> };<br /> Animate.prototype.__startMove__ = function ()<br /> {<br /> var that = this;<br /> clearInterval(that.obj.timer);<br /> that.obj.timer = setInterval(function ()<br /> {<br /> that.__doMove__()<br /> }, 30);<br /> };<br /> Animate.prototype.__doMove__ = function ()<br /> {<br /> var complete = true;<br /> var property = null;<br /> for (property in this.options)<br /> {<br /> var iCur = parseFloat(css(this.obj, property));<br /> property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));<br /> var iSpeed = (this.options[property] - iCur) / 5;<br /> iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);<br /> this.options[property] == iCur || (complete = false, css(this.obj, property, iSpeed + iCur))<br /> }<br /> complete && (clearInterval(this.obj.timer), this.__onEnd__ && this.__onEnd__.apply(this.obj))<br /> };<br /> window.onload = function ()<br /> {<br /> new Youa("box")<br /> };<br /> </script><br /> </head><br /> <body><br /> <div id="box"><br /> <div id="container"><br /> <div class="item"><br /> <div class="pic"><br /> <a href="javascript:;"><img src="/uploads/allimg/1109/veryhuo_1.jpg" /></a><br /> </div><br /> <div class="txt"><br /> <dl><br /> <dt><a href="javascript:;">必图拳馆</a></dt><br /> <dd class="info">不要把自己困住 你需要释放！</dd><br /> <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd><br /> <dd><span>用户印象：</span><span class="pink">过瘾</span><span class="blue">带劲</span><span class="green">有活力</span></dd><br /> </dl><br /> <div class="comment"><br /> <h3>用户评价</h3><br /> <div class="comment_list"><br /> <ul id="list"><br /> <li><b>thaifight：</b>是一个非常好的一个拳...</li><br /> <li><b>快乐小友：</b>散打课的实战机会挺多...</li><br /> <li><b>爱情赛车：</b>白天人很少，喜欢安静...</li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div class="item"><br /> <div class="pic"><br /> <a href="javascript:;"><img src="/uploads/allimg/1109/veryhuo_2.jpg"></a><br /> </div><br /> <div class="txt"><br /> <dl><br /> <dt><a href="javascript:;">北京「七田阳光」全脑教育培训中心</a></dt><br /> <dd class="info">点亮孩子智慧人生</dd><br /> <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd><br /> <dd><span>用户印象：</span><span class="pink">亲切</span><span class="blue">耐心</span><span class="green">干净</span></dd><br /> </dl><br /> <div class="comment"><br /> <h3>用户评价</h3><br /> <div class="comment_list"><br /> <ul id="list"><br /> <li><b>Jcenter：</b>如此诚恳的教育机构 ...</li><br /> <li><b>citaslin：</b>孩子的进步很大</li><br /> <li><b>甲鱼爱媛媛：</b>七田阳光很注重品质，...</li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div class="item"><br /> <div class="pic"><br /> <a href="javascript:;"><img src="/uploads/allimg/1109/veryhuo_3.jpg" /></a><br /> </div><br /> <div class="txt"><br /> <dl><br /> <dt><a href="javascript:;">慕纱莹雪婚纱礼服馆</a></dt><br /> <dd class="info">物超所值的性价比，尽在慕纱莹雪！</dd><br /> <dd><span>总体评价：</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd><br /> <dd><span>用户印象：</span><span class="pink">精致</span><span class="blue">做工好</span><span class="green">专业</span></dd><br /> </dl><br /> <div class="comment"><br /> <h3>用户评价</h3><br /> <div class="comment_list"><br /> <ul id="list"><br /> <li><b>小企鹅快跑：</b>这个周末去取了我定的...</li><br /> <li><b>月逢明时：</b>这家婚纱店的婚纱做工...</li><br /> <li><b>日历本丢了：</b>上周末去取了婚纱，婚...</li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div class="item"><br /> <div class="pic"><br /> <a href="javascript:;"><img src="/uploads/allimg/1109/veryhuo_4.jpg"></a><br /> </div><br /> <div class="txt"><br /> <dl><br /> <dt><a href="javascript:;">北京金三优装饰有限责任公司</a></dt><br /> <dd class="info">一站式服务让你省时、省力、省钱、省心</dd><br /> <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd><br /> <dd><span>用户印象：</span><span class="pink">口碑好</span><span class="blue">规模很大</span><span class="green">讲信誉</span></dd><br /> </dl><br /> <div class="comment"><br /> <h3>用户评价</h3><br /> <div class="comment_list"><br /> <ul id="list"><br /> <li><b>紫婧之梦：</b>这家店不错哦！</li><br /> <li><b>gotometop：</b>装修工都还挺朴实的，...</li><br /> <li><b>libangcheng1：</b>这家公司还可以，去年...</li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div class="item"><br /> <div class="pic"><br /> <a href="javascript:;"><img src="/uploads/allimg/1109/veryhuo_5.jpg"></a><br /> </div><br /> <div class="txt"><br /> <dl><br /> <dt><a href="javascript:;">鸿喜族休闲俱乐部—潘家园店</a></dt><br /> <dd class="info">专注人类健康，打造财富传奇！</dd><br /> <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd><br /> <dd><span>用户印象：</span><span class="pink">真好</span><span class="blue">专业</span><span class="green">手法好</span></dd><br /> </dl><br /> <div class="comment"><br /> <h3>用户评价</h3><br /> <div class="comment_list"><br /> <ul id="list"><br /> <li><b>永封de铁盒：</b>环境挺不错，灯光控制...</li><br /> <li><b>老冯爱国：</b>不错的地方，是个很有...</li><br /> <li><b>白云寺方丈：</b>我不会打台球，但朋友...</li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div class="item"><br /> <div class="pic"><br /> <a href="javascript:;"><img src="/uploads/allimg/1109/veryhuo_6.jpg"></a><br /> </div><br /> <div class="txt"><br /> <dl><br /> <dt><a href="javascript:;">北京心拓城拓展培训</a></dt><br /> <dd class="info">客户第一 执行有力 激情勤奋 简单团结</dd><br /> <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd><br /> <dd><span>用户印象：</span><span class="pink">专业</span><span class="blue">安全</span><span class="green">积极</span></dd><br /> </dl><br /> <div class="comment"><br /> <h3>用户评价</h3><br /> <div class="comment_list"><br /> <ul id="list"><br /> <li><b>janice19891：</b>很负责任~</li><br /> <li><b>旺达是条鱼：</b>朋友参加过他们的拓展...</li><br /> <li><b>bjftxiaoniu：</b>吼吼，在这里看到他们...</li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div class="item"><br /> <div class="pic"><br /> <a href="javascript:;"><img src="/uploads/allimg/1109/veryhuo_7.jpg"></a><br /> </div><br /> <div class="txt"><br /> <dl><br /> <dt><a href="javascript:;">韩医生专业祛痘连锁机构北京直营店</a></dt><br /> <dd class="info">我们只祛痘 所以更专业</dd><br /> <dd><span>总体评价：</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd><br /> <dd><span>用户印象：</span><span class="pink">效果好</span><span class="blue">细心</span><span class="green">专业</span></dd><br /> </dl><br /> <div class="comment"><br /> <h3>用户评价</h3><br /> <div class="comment_list"><br /> <ul id="list"><br /> <li><b>天涯hehaijiao：</b>这家店很好，顾客很多...</li><br /> <li><b>爱神马geili：</b>我治疗了两天感觉的好...</li><br /> <li><b>天上的语言：</b>这几天已经看到明显效...</li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div class="item"><br /> <div class="pic"><br /> <a href="javascript:;"><img src="/uploads/allimg/1109/veryhuo_8.jpg"></a><br /> </div><br /> <div class="txt"><br /> <dl><br /> <dt><a href="javascript:;">罗曼卡婚纱<b>摄影</b></a></dt><br /> <dd class="info">口碑好 性价比高 无额外消费</dd><br /> <dd><span>总体评价：</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd><br /> <dd><span>用户印象：</span><span class="pink">口碑好</span><span class="blue">很喜欢</span><span class="green">完美</span></dd><br /> </dl><br /> <div class="comment"><br /> <h3>用户评价</h3><br /> <div class="comment_list"><br /> <ul id="list"><br /> <li><b>明确指出i：</b>拍的很不错，老妈都夸...</li><br /> <li><b>爱就一直走吧：</b>他们家服务态度好，衣...</li><br /> <li><b>爱过你me：</b>最后照片拍出来后朋友...</li><br /> </ul><br /> </div><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div id="control"></div><br /> </div><br /> </body><br /> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 鼠标滑过文章列表，渐隐渐显闪亮效果jQuery实现网页上键盘左右方向键翻页代码
